双向绑定……保证了每一个form控件在内存中都有一个记录变量与之对应，这种对应是双向的，不管是ajax请求对内存中变量的操作，还是视图发生了改变，都会对相应的值进行更新。
使用v-model指令可以轻易做到这些。
简单的小例子：
<!-- 单行文本绑定 -->
<div id="vm1">
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#vm1',
data: {
message: ""
}
})
</script>
渲染结果
随着输入的值不断变化
对于多行文本，v-model也有出色的效果，当然需要有一些改变。
<!-- 多行文本绑定 -->
<div id="vm2">
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<!-- 由于textarea元素的特殊性，请用v-model绑定 -->
<textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>
<script type="text/javascript">
var vm2 = new Vue({
el: '#vm2',
data: {
message: ""
}
})
</script>
虽然<textarea>是个双标记，但这也不意味着你就可以把绑定写在两个标记之中。
输入前
输入后
对于复选框，可以将布尔值绑定到控件上，甚至可以直接初始化。
<!-- 复选框绑定到布尔值 -->
<div id="vm3">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
<script type="text/javascript">
var vm3 = new Vue({
el: '#vm3',
data: {
checked: true
}
})
</script>
初始化的true值
通过取消选中改变值
多个复选框，我们也可以把它的值绑定到数组上去。
<div id="vm4">
<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="jack">mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
<script type="text/javascript">
var vm4 = new Vue({
el: '#vm4',
data: {
checkedNames: []
}
})
</script>
选中的元素即与数组中一一对应
单选按钮貌似用一个变量就能搞定
<!-- 单选按钮 -->
<div id="vm5">
<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>
<script type="text/javascript">
var vm5 = new Vue({
el: '#vm5',
data: {
picked: ''
}
})
</script>
会显示选中的值
还有关于下拉列表框的两种形式，单选和多选。
单选
<!-- 我们也可以禁用其中的选项来添加描述性文本 -->
<div id="vm6">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script type="text/javascript">
var vm6 = new Vue({
el: '#vm6',
data: {
selected: ''
}
})
</script>
单选
多选
<div id="vm7">
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
<script type="text/javascript">
var vm7 = new Vue({
el: '#vm7',
data: {
selected: []
}
})
</script>
多选绑定到数组
当然，对于<select>中的选项，使用v-for渲染代码量更低一些。
<div id="vm8">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script type="text/javascript">
// 在data中预先确定默认选中的值
var vm8 = new Vue({
el: '#vm8',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
</script>
依然能够拿出选择的值
对其中一些绑定的说明：
<!-- 当选中时，`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>
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
<!-- // 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no' -->
<input type="radio" v-model="pick" v-bind:value="a">
<!--
// 当选中时
vm.pick === vm.a -->
<select v-model="selected">
<!-- 内联对象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
<!-- // 当选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123 -->
最后是一些动作标记：
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">
<!-- 自动转数字 -->
<input v-model.number="age" type="number">
<!-- 自动去除前后空格 -->
<input v-model.trim="msg">
网友评论