多选时(绑定到一个数组)
<div id="example-6">
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>new Vue({
el: '#example-6',
data: {
selected: [] }
})
值绑定
对于单选按钮,复选框以及选择框的选项,v-model绑定的值通常是静态字符串(对于复选框也可以是布尔值):
<!-- 当选中时,`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a"><!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 当选中第一个选项时,`selected` 为字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
(1) 复选框
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
这里的 true-value 和 false-value 特性并不会影响输入控件的 value 特性,因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交,(比如“yes”或“no”),请换用单选按钮。
(2) 单选按钮
<input type="radio" v-model="pick" v-bind:value="a">
// 当选中时
vm.pick === vm.a修饰符
(1) .lazy
在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:
(2) .number
如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符
(3) trim
如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:
示例:
// >>>>>>> html
<div id="app" >
<!-- 输入框绑定 -->
<input v-model='massage' placeholder="输入信息" >
<p>massage is:{{ massage }}</p>
<hr>
<!-- 单个选框绑定,返回值为布尔值 -->
<p>单个选框绑定,返回值为布尔值:</p>
<input v-model='radioStatus' type="checkbox" name="isAgree">
<br>
<label>数据:{{radioStatus}}</label>










