这篇文章主要介绍了Vue.js 中的 v-model 指令及绑定表单元素的方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
我们可以使用 Vue.js 中的 v-model 指令来完成表单数据的双向绑定。
1 基础用法
1.1 文本输入框（text）
这里演示了在文本输入框上输入的内容，会实时映射到绑定的数据上。
html：
<div id="app"> <p>输入框：{{content}}</p></div>
js：
1.2 大文本输入框（textarea）
绑定方法与文本输入框相同。
html：
<div id="app2"> <textarea></textarea><p>内容：</p><p>{{content}}</p></div>
js：
var app2 = new Vue({ el: '#app2', data: { content: '' } });
这里对展示的内容所对应的
元素加了 white-space: pre 样式，这样内容即使带有回车符也会保留。
——————————————————————————–
注意：表单控件所显示的值只依赖于所绑定的数据，所以即便设置了表单控件中的 value值，也不会起作用哦。同理，之间的值也无效。
之前的示例我们可以发现，使用中文输入法时，只有确定选中的词语，才会被如果 Vue.js 所更新。如果希望输入的内容实时更新，那么可以使用 @input。
html：
<div id="app3"> <textarea></textarea><p>内容：</p><p>{{content}}</p></div>
js：
var app3 = new Vue({ el: '#app3', data: { content: '' }, methods: { inputHandler: function (event) { this.content = event.target.value; } } });
可以看出，即使在 @input 定义的函数不带参数，Vue.js 也会在定义的函数（示例中的 inputHandle
本文来源gao!%daima.com搞$代*!码9网(
r）中传入 event 原生事件对象。
1.3 单选框
单选框一般都有多个条件可供选择，既然是单选框，自然希望实现互斥效果，我们可以使用 v-model 指令配合单选框的 value 来实现。
html：
<div id="app4"> <label for="radio1">文学</label><label for="radio2">艺术</label><label for="radio3">经济</label><br><p>选择了：{{checked}}</p></div>
js：
var app4 = new Vue({ el: '#app4', data: { checked: '文学' } });
1.4 复选框
复选框的绑定方式与单选框相同，只不过复选框所对应的数据类型是数组罢了。
html：
<div id="app5"> <label for="checkbox1">文学</label><label for="checkbox2">艺术</label><label for="checkbox3">经济</label><br><p>选择了：{{checked}}</p></div>
js：
var app5= new Vue({ el: '#app5', data: { checked: ['文学','艺术'] } });
1.5 下拉选择框
1.5.1 单选
html：
<div id="app6"> 文学艺术经济<br><p>选择了：{{selected}}</p></div>
js：
var app6 = new Vue({ el: '#app6', data: { selected: '1' } });
可以看出，如果 含有 value 值，则会先匹配该值；如果没有，则匹配 中的 text 值（比如示例中的 经济）。
1.5.2 多选
为 标签添加 multiple 属性，即可实现多选。
html：
<div id="app7"> 文学艺术经济<br><p>选择了：{{selected}}</p></div>
在实际应用场景， 标签中的 一般是通过 v-for 指令动态输出的，其中每一项的 value 或 text 都可以使用 v-bind 动态输出的。
html：
<div id="app8"> {{option.text}} <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 id="app"> <label for="radio1">文学</label><label for="radio2">艺术</label><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 id="app2"> <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 id="app3"> 文学艺术<br><p>选择了：{{selected.number}}</p></div>
js：
var app3 = new Vue({ el: '#app3', data: { selected: '' } });
当选中某个 option 时，app3.selected 为 Object，所以 selected.number 即为 :value 定义的绑定值。
以上示例 DEMO
以上就是Vue.js 中的 v-model 指令及绑定表单元素的方法的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：Vue.js 中的 v-model 指令及绑定表单元素的方法
