});
</script>
当前状态下的结果如图6-3所示：
选择列表：
选择列表就是下拉选择器，也是常见的表单控件，同样也分为单选和多选两种方式。
先看一下单选的示例代码：
<div id="app">
<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 id="app">
<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 id="app">
<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绑定的值是一个静态字符串或布尔值。
