v-model双向数据绑定Vue.js 是一个 MVVM 框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。值得注意的是,我们所说的数据双向绑定,一定是对于 UI 控件来说的,非 UI 控件不会涉及到数据双向绑定。对于我们处理表单,Vue.js 的双向数据绑定用起来就特别舒服了。你可以用 v-model 指令在表单 < input> 、 < textarea> 及 < select> 元元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
代码:
05-v-bind-1.html
文本框
<body>
<div id="app">
<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以进行双向的数据绑定 -->
<input type="text" v-model="searchMap.keyWord">
<p>您要查询的是:{{searchMap.keyWord}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
new Vue({
el: '#app',
data: {
searchMap:{
keyWord: 'kuangshen'
}
}
})
</script>
</body>
填写完毕后
,
打开浏览器,对比两个输入框,查看效果!
代码:
05-v-bind-2.html
单复选框
<body>
<div id="app">
单复选框:
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
new Vue({
el: '#app',
data: {
checked: false
}
})
</script>
</body>
代码:05-v-bind-3.html 多复选框
<body>
<div id="app">
多复选框:
<input type="checkbox" id="jack" value="Jack" vmodel="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" vmodel="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" vmodel="checkedNames">
<label for="mike">Mike</label>
<span>选中的值: {{ checkedNames }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
new Vue({
el: '#app',
data: {
checkedNames: []
}
})
</script>
</body>
代码:
05-v-bind-4.html 下拉框
<body>
<div id="app">
下拉框:
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>选中的值: {{ selected }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
var vm = new Vue({
el: '#app',
data: {
selected: ''
}
});
</script>
</body>
代码:05-v-bind-5.html 单选按钮
<body>
<div id="app">
单选按钮:
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<span>选中的值: {{ picked }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
new Vue({
el: '#app',
data: {
picked: ''
}
})
</script>
</body>
注意
:如果
v-model
表达式的初始值未能匹配任何选项,
< select>
元素将被渲染为
“
未选中
”
状态。
在
iOS
中,这会使用户无法选择第一个选项。因为这样的情况下,
iOS
不会触发
change
事件。因此, 更推荐像上面这样提供一个值为空的禁用选项。