表单控件的数据绑定是用 v-model 指令来实现的，他会根据控件类型自动选取正确的方法来更新元素。由于表单控件有不同的类型，v-model 指令在不同的表单控件上应用是也会有些差异
单行文本输入框
在<input>标签中，使用 value 属性设置了一个初始值，用 v-model 指令绑定一个表达式 message，对应的数据属性是 message。 代码演示：
<template> <div id="app"> <input type="text" v-model="message" value="不会显示"> <p>message:{{message}}</p> </div></template><script>export default { name: 'App', data() { return { message: 'xaiokai' } }}</script>
复制代码
运行结果：
image.png
在输入框中输入内容下面的<p>标签里面的 message 值也会同时改变
多行文本输入框
多行文本输入框<textarea>标签的默认值是放在元素的开始标签和结束标签之间的，这样的话除了初次渲染的时候，文本框会显示 message 的值，之后 message 属性的改变就跟文本框没关系了、同样在文本框中输入的数据也不会影响 message 属性的值，这样就失去了数据双向绑定的特性了。
所以我们多行文本框还是用 v-model 代码演示：
<template> <div id="app"> <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea> <p>{{message}}</p> </div></template><script>export default { name: 'App', data() { return { message: 'xaiokai' } }}</script>
复制代码
运行结果：
image.png
复选框
复选框在单独使用和多个复选框一起使用时，v-model 绑定的值一定会有所不同，对于前者，绑定的是布尔值，选中则值为 true，未选中值则为 false；后者绑定的是同一个数组，选中的复选框的值将被保存到数组中
代码演示：
<template> <div id="app"> <h1>单个复选框</h1> <input id="agreement" type="checkbox" v-model="isAgree"> <label for="agreement">{{isAgree}}</label> <h1>多个复选框</h1> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" /> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames" /> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" /> <label for="mike">Mike</label> <br /> <span>Checked names: {{ checkedNames }}</span> </div></template><script>export default { name: 'App', data() { return { isAgree: false, checkedNames: [] } }}</script>
复制代码
运行结果：
image.png
单选按钮
当单选按钮被选中时，v-model 绑定的数据属性的值会被设置为改单选按钮的 value 值
代码演示：
<template> <div id="app"> <input type="radio" id="male" value="男" v-model="gender"><label for="male">男</label> <input type="radio" id="female" value="女" v-model="gender"><label for="female">女</label> <br /> <span>性别： {{gender }}</span> </div></template><script>export default { name: 'App', data() { return { gender: '' } }}</script>
复制代码
运行结果：
image.png
选择框
选择框可以是单选，也可以是多选指定 <select>标签的multiple属性因此 v-model 在这两种情形下的绑定值会有所不同，单选时，绑定的是选项的值 <option>标签 value 属性的值，多选时，绑定到一个数组，所有选项的值被保存在数组中
代码演示：
<template> <div id="app"> <select v-model="selected"> <option disabled value="">单选项</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>选项: {{ selected }}</span> <h1>多选项</h1> <select v-model="selecteds" multiple> <option>A</option> <option>B</option> <option>C</option> </select> <br /> <span>多选项: {{ selecteds }}</span> </div></template><script>export default { name: 'App', data() { return { selected: '', selecteds: [] } }}</script>
复制代码
运行结果：
image.png
评论