基础用法
可以用v-model
指令在表单<input>
、<textarea>
及<select>
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,?但v-model
本质上不过是语法糖?!。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
v-model
会忽略所有表单元素的value
、checked
、selected
特性的初始值而总是将Vue实例的数据作为数据来源。?你应该通过JavaScript在组件的data
选项中声明初始值?!。
对于需要使用输入法(如中文、日文、韩文等)的语言,你会发现v-model
不会在输入法组合文字过程中得到更新。如果你也想处理这个过程,请使用input
事件。
文本
<div id="app-67"> <input v-model="msg" placeholder="edit me"/> <p>Message is: {{ msg }}</p> </div>
new Vue({ el: '#app-67', data: { msg: '' } })
在文本区域插值(<textarea>
</textarea>
)并不会生效,应用v-model
来代替。
复选框
单个复选框,绑定到布尔值:
<div id="app-69"> <input type="checkbox" id="checkbox" v-model="checked"/> <label for="checkbox">{{ checked }}</label> </div>
var app69 = new Vue({ el: '#app-69', data: { checked: false } })
多个复选框,绑定到同一个数组:
<div id="app-70"> <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>
var app70 = new Vue({ el: '#app-70', data: { checkedNames: [] } })
注意:如果v-model
指令用在复选框上,并且指定一个非数组对象,那么这个对象将被存储这个复选框是否已经被选择的boolean
值,如果指定一个数组对象,那么这个对象将被存储这个已经被选择的复选框的value
值。
Checked names: {{ checkedNames }}
单选按钮
<div id="app-72"> <input type="radio" id="one" value="One" v-model="picked"/> <label for="one">One</label> <br/> <input type="radio" id="two" value="Two" v-model="picked"/> <label for="two">Two</label> <br/> <span>Picked: {{ picked }}</span> </div>
var app72 = new Vue({ el: '#app-72', data: { picked: '' } })
这组radio并没有加name属性进行分组,但是Vue.js会自动将这两个radio关联在一起。
选择框
<div id="app-73"> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div>
var app73 = new Vue({ el: '#app-73', data: { selected: '' } })
如果v-model
表达式的初始值未能匹配任何选项,<select>
元素将被渲染为“未选中”状态。在iOS中,这会使用户无法选择第一个选项。因为这样的情况下,iOS不会触发change事件。因此更推荐像上面这样提供一个值为空的禁用选项。
<div id="app-74"> <select v-model="selected" multiple style="width: 50px;"> <option>A</option> <option>B</option> <option>C</option> </select> <br/> <span>Selected: {{ selected }}</span> </div>
var app74 = new Vue({ el: '#app-74', data: { selected: '' } })
用v-for
渲染的动态选项:
<div id="app-75"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span> </div>
var app75 = new Vue({ el: '#app-75', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } })
值绑定
对于单选按钮,复选框以及选择框的选项,v-model
绑定的值通常是静态字符串(对于复选框也可以是布尔值):
<div id="app-76"> <!-- 当选中时,'picked'为字符串"a" --> <input type="radio" v-model="picked" value="a"/> <input type="radio" v-model="picked" value="b"/> <span>{{ picked }}</span> <!-- 'toggle'为true或false --> <input type="checkbox" v-model="toggle"/> <span>{{ toggle }}</span> <!-- 当选中第一个选项时·,'selected'为字符串'abc' --> <select v-model="selected"> <option value="abc">ABC</option> <option value="def">DEF</option> </select> <span>{{ selected }}</span> </div>
var app76 = new Vue({ el: '#app-76', data: { picked: '', toggle: false, selected: [] } })
但是有时我们可能想把值绑定到Vue实例的一个动态属性上,这时可以用v-bind
实现,并且这个属性的值可以不是字符串。
复选框
<div id="app-77"> <input type="checkbox" v-model="toggle" true-value="yes" false-value="no"/> <p>toggle: {{ toggle }}</p> </div>
var app77 = new Vue({ el: '#app-77', data: { toggle: '' } })
这里的true-value
和false-value
特性并不会影响输入控件的value
特性,因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交,(比如“yes”或“no”),请换用单选按钮。
单选按钮
??!
<div id="app-78"> <input type="radio" name="radioGroup1" v-model="picked" v-bind:value="a"/> <input type="radio" name="radioGroup1" v-model="picked" v-bind:value="b"/> <p>{{ picked }}</p> </div>
var app78 = new Vue({ el: '#app-78', data: { picked: false, a: 'test', b: 'test2' } })
// 当选中时 vm.picked === vm.a
解析
<input type="radio" name="radioGroup1" v-model="picked" v-bind:value="a"/>
v-model='picked'
表示如果单选按钮被选中,会将单选按钮value
属性的值赋值到picked
变量上。而单选按钮的value
属性的值与变量a
绑定在了一起,所以单选按钮的value
属性值就是变量a
的值。所以,如果单选按钮如果被选择,则变量a
的值就会赋值到picked
上,因此,如果这个单选按钮如果被选择,则picked
与a
这两个变量将相等。
选择框的选项
<div id="app-79"> <select v-model="selected"> <option v-bind:value="{ number: 123 }">123</option> <option v-bind:value="1234">1234</option> </select> {{ selected }} </div>
var app79 = new Vue({ el: '#app-79', data: { selected: '' } })
// 当选中时 typeof vm.selected // => 'object' vm.selected.number // => 123
修饰符
.lazy
在默认情况下,v-model
在每次input
事件(即改变input的内容就立即响应,光标没有离开)触发后将输入框的值与数据进行同步(除了上述输入法组合文字时)。你可以添加lazy
修饰符,从而转变为使用change
事件(当光标离开控件时)进行同步:
<div id="app-80"> <!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg"> <input v-model="msg"> <p>Msg: {{ msg }} </div>
var app80 = new Vue({ el: '#app-80', data: { msg: '' } })
.number
如果想自动将用户输入的值转为数值类型,可以给v-model
添加number
修饰符:
<div id="app-81"> <input v-model.number="age" type="number"/> {{ age }} </div>
var app81 = new Vue({ el: '#app-81', data: { age: '0' } })
这通常很有用,因为即使在type='number'
时,HTML输入元素的值也总会返回字符串。
.trim
如果要需要过滤用户输入的首尾空白字符,可以给v-model
添加trim
修饰符:
<input v-model.trim="msg">
在组件上使用v-model
如果你还不熟悉Vue的组件,可以暂且跳过这里。
HTML原生的输入元素类型并不总能满足需求。幸好,Vue的组件系统允许你创建具有完全自定义行为且可复用的输入组件。这些输入组件甚至可以和v-model
一起使用!要了解更多,请参阅组件指南中的自定义输入组件。