<div> <select v-model="selected" multiple> <option value="1">文学</option> <option value="2">艺术</option> <option>经济</option> </select> <br> <p>选择了：{{selected}}</p> </div>
在实际应用场景，<select> 标签中的 <opinion> 一般是通过 v-for 指令动态输出的，其中每一项的 value 或 text 都可以使用 v-bind 动态输出的。
html：
<div> <select v-model="selected"> <option v-for="option in options" :value="option.value">{{option.text}} </option> </select> <br> <p>选择了：{{selected}}</p> </div>
js：
var app8 = new Vue({ el: '#app8', data: { selected: '1', options: [ {text: '文学', value: '1'}, {text: '艺术', value: '2'} ] } });
效果：
--------------------------------------------------------------------------------
因为 select 标签的呈现样式依赖于浏览器，所以在实际业务场景中，我们更多的是使用 div 来模拟 select 标签的列表功能，而这可以通过使用 Vue.js 自定义组件的方式来实现一个通用的下拉选择组件。
以上示例 DEMO
2 绑定动态变量
之前所说的示例，v-model 绑定的都是静态变量。我们可以使用 v-bind 来绑定动态变量。
2.1 单选框
html：
<div> <input type="radio" v-model="picked" :value="value"> <label for="radio1">文学</label> <input type="radio" v-model="picked" :value="value2"> <label for="radio2">艺术</label> <input type="radio" v-model="picked" :value="value3"> <label for="radio3">经济</label> <br> <p>{{picked}}</p> <p>{{value}},{{value2}},{{value3}}</p> </div>
js：
var app = new Vue({ el: '#app', data: { picked: false, value: '文学', value2: '艺术', value3: '经济', } });
效果：
示例中定义的单选框默认值为 picked 所定义的 false。当选中某个单选框时，则动态绑定在 :value 中定义的变量。
2.2 复选框
html：
<div> <input type="checkbox" v-model="checked" :true-value="value1" :false-value="value2"> <label for="checkbox">开关</label> <p>checked：{{checked}}</p> <p>value1：{{value1}}</p> <p>value2：{{value2}}</p> </div>
js：
var app2 = new Vue({ el: '#app2', data: { value1: '亮', value2: '暗', checked: '' } });
效果：
复选框的默认值绑定的是 v-model 定义的变量，而勾选与取消勾选所绑定的值，则分别由 :true-value 与 false-value 来实现动态绑定。
2.3 下拉选择框
html：
<div> <select v-model="selected"> <option :value="{number:1}">文学</option> <option :value="{number:2}">艺术</option> </select> <br> <p>选择了：{{selected.number}}</p> </div>
js：
var app3 = new Vue({ el: '#app3', data: { selected: '' } });
效果：
当选中某个 option 时，app3.selected 为 Object，所以 selected.number 即为 :value 定义的绑定值。
以上示例 DEMO
您可能感兴趣的文章: