基础用法
<!--
v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。
你应该通过 JavaScript 在组件的 data 选项中声明初始值。
在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效,应用 v-model 来代替
-->
<div id="id1">
<input v-model="msg" placeholder="edit me">
<p>msg: {{msg}}</p>
</div>
<script>
var vm1 = new Vue({
el:'#id1',
data:{
msg:''
}
});
</script>
复选框
<div id='id2'>
<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>
<script>
var vm2 = new Vue({
el:'#id2',
data:{
checkedNames:[],
}
});
</script>
单选按钮
<div id="id3">
<input type="radio" value="One" v-model="picked">
<label >One</label>
<br>
<input type="radio" value="Two" v-model="picked">
<label >Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
<script>
new Vue({
el: '#id3',
data: {
picked: ''
}
})
</script>
单选选择框
<!--为选中状态:selected: '' 选中其中一个:selected: 'A' -->
<div id="id4">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script>
new Vue({
el: '#id4',
data: {
selected: 'A'
}
})
</script>
<!-- true-value,false-value 分别是被选中和没有被选中时的值-->
<div id="id5">
<input type="checkbox"
v-model="toggle"
true-value="yes1"
false-value="no1"><span>{{toggle}}</span>
<hr>
<input type="radio" v-model="pick" v-bind:value="a"><span>a</span>
<input type="radio" v-model="pick" v-bind:value="b"><span>b</span>
</div>
<script>
new Vue({
el: '#id5',
data: {
toggle:'no',
pick:'',
a:'a',
b:'b'
}
})
</script>
修饰符
**.number,只能输入数值类型 .trim过滤首尾空白字符 **
<input id="id6" v-model.number="age" type="number">
<input id="id7" v-model.trim="msg">
<script>
new Vue({
el: '#id6',
data: {
age:0
}
});
new Vue({
el: '#id7',
data: {
msg:''
}
})
</script>