v-model指令在表单控件元素上创建双向数据绑定。 v-model对应的也是data里面的数据并可以改变data数据。
一、文本
<input v-model="message" placeholder="edit me">
<p>Message id:{{message}}</p>
二、多行文本
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<br>
<span>Mutiline Message is:</span>
<p style="white-space:pre">{{message}}</p>
三、复选框
1、单个勾选框，逻辑值
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>
2、多个复选框，绑定到一个数组
<input type="checkbox" id="jack" value="jack" v-model="checkedNmaes">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="john" v-model="checkedNmaes">
<label for="john">John</label>
<br>
<span>cHecked names:{{checkedNames}}</span>
new Vue({
el:'...',
data:{
checkedNames:[]
}
})
四、单选按钮
<div id="example-4" class="demo">
<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>
new Vue({
el: '#example-4',
data: {
picked: ''
}
})
五、选择列表
1、单选列表
绑定到变量上即可。
<div id="example-5" class="demo">
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
<span>Selected:{{selected}}</span>
</div>
new Vue({
el:'#example-5',
data:{
selected:null
}
})
2、多选列表
<div id="example-6" class="demo">
<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:[]
}
})
3、动态选项的渲染
动态选项使用v-for进行渲染。
<select v-model=
"selected">
<option v-
for=
"option in options" v-bind:
value=
"option:value">
{{option.
text}}
</option>
</select>
<span>Selected:{{selected}}</span>
new Vue({
el:
'...',
data:{
selected:
'A',
options:[
{
text:
'one',
value:
'A'},
{
text:
'two',
value:
'B'},
{
text:
'three',
value:
'C'}
]
}
})
六、修饰符
1、.lazy??
默认情况下，v-model在input事件中同步输入框的值与数据，但可以添加一个修饰符，在change事件中同步。
2、.number
将用户的输入值转为 Number 类型。
<input v-model.number=
"age" type=
"number">
这通常很有用，因为在 type=”number” 时 HTML 中输入的值也总是会返回字符串类型。
3、.trim
自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入
