<div> <select v-model="selected"> <option>html</option> <option value="js">JavaScript</option> <option>css</option> </select> <p>你选择的是：{{selected}}</p> </div> <script> var app = new Vue({ el: "#app", data: { selected: "html" } }); </script>
<option>是备选项，如果含有value属性，v-model就会优先匹配value的值；
如果没有，就会直接匹配<option>的text。
比如选中第二项时，selected的值为js，而不是JavaScript。
给<select>添加属性multiple就可以多选了，此时v-model绑定的是一个数组，与复选框用法类似。
实例代码如下：
<div> <select v-model="selected" multiple> <option>html</option> <option value="js">JavaScript</option> <option>css</option> </select> <p>你选择的是：{{selected}}</p> </div> <script> var app = new Vue({ el: "#app", data: { selected: ["html", "js"] } }); </script>
在业务中，<option>经常用v-for动态输出，value和text也是用v-bind来动态输出的。
例如：
<div> <select v-model="selected"> <option v-for="item in options" :value="item.value">{{item.text}}</option> </select> <p>你选择的是：{{selected}}</p> </div> <script> var app = new Vue({ el: "#app", data: { options: [ {text:"HTML", value:"html"}, {text:"JavaScript", value:"js"}, {text:"CSS", value:"css"}, ], selected: "html" } }); </script>
虽然用选择列表<select>控件可以很简单地完成下拉选择的需求，但是在实际业务中反而不常用，因为它的样式依赖平台和浏览器，无法统一，也不太美观，功能也受限，，比如不支持搜索，所以常见的解决方案是用<div>moi一个类似的控件。
当阅读完第7章组件的内容后，可以尝试编写一个下拉选择器的通用组件。
6.2 绑定值上一节介绍的单选按钮、复选框和选择列表在单独使用或单选的模式下，v-model绑定的值是一个静态字符串或布尔值。
但在业务中，有时需要绑定一个动态的数据，这时可以用v-bind来实现。
单选按钮：
<div> <input type="radio" v-model="picked" :value="value"> <label>单选按钮</label> <p>{{picked}}</p> <p>{{value}}</p> </div> <script> var app = new Vue({ el: "#app", data: { picked: false, value: 123 } }); </script>
在选中时，app.picked===app.value，值都是123。
复选框：
<div> <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2"> <label>复选框</label> <p>{{toggle}}</p> <p>{{value1}}</p> <p>{{value2}}</p> </div> <script> var app = new Vue({ el: "#app", data: { toggle: false, value1: "a", value2: "b" } }); </script>
勾选时，app.toggle===app.value1；
未勾选时，app.toggle===app.value2。
选择列表：
<div> <select v-model="selected"> <option :value="{number:123}">123</option> </select> {{selected.number}} </div> <script> var app = new Vue({ el: "#app", data: { selected: "" } }); </script>
当选中时，app.selected是一个Object，所以app.selected.number===123。
6.3 修饰符与事件的修饰符类似，v-model也有修饰符，用于控制数据同步的时机。
.lazy：
在输入框中，v-model默认是在input事件中同步输入框的数据(除了提示中介绍的中文输入法情况外)。
使用修饰符.lazy会转变为在change事件中同步，示例代码如下：
<div> <input type="text" v-model.lazy="message"> <p>{{message}}</p> </div> <script> var app = new Vue({ el: "#app", data: { message: "" } }); </script>
这是，message并不是实时改变的，而是在失焦或按回车时才更新。
.number：