v-model
指令会在表单输入控件上创建数据的双向绑定,对于各种不同的表单控件,v-model
绑定的通常是true/false
或value
值,下面一一进行介绍。
text绑定的是输入的value
值。
<input type="text" v-model="msg">
textarea绑定的是该元素的文本值(用户输入的值)。
<textarea v-model="msg"></textarea>
单个checkbox,绑定的值是true
或false
。
<input type="checkbox" v-model="checked">
多个checkbox记得要绑定到同一个数组,数组内的值是复选框的value
值。
<input type="checkbox" value="a" v-model="checked">
<input type="checkbox" value="b" v-model="checked">
<input type="checkbox" value="c" v-model="checked">
radio是成组使用的,绑定的值是value
属性的值。
<input type="radio" value="a" v-model="picked">
<input type="radio" value="b" v-model="picked">
单选的select中,绑定的是option
元素中的文本值。
<select v-model="picked">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
多选的select中,绑定的是option
元素中的文本值到一个数组。
<select v-model="picked" multiple>
<option>a</option>
<option>b</option>
<option>c</option>
</select>