1. 双向数据绑定
Vue.js是一个MVVM框架&＃xff0c;即数据双向绑定&＃xff0c;即当数据发生变化时&＃xff0c;视图也就发生变化&＃xff1b;当视图发生变化时&＃xff0c;数据也会跟着同步变化。这也算是Vue.js的精髓之处。值得注意的是&＃xff0c;我们所说的数据双向绑定&＃xff0c;一定是对于UI控件来说的&＃xff0c;非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提&＃xff0c;如果我们用Vuex&＃xff0c;那么数据流也是单项的&＃xff0c;这时就会和双向数据绑定有冲突。
2. 为什么要实现数据的双向绑定
在Vue.js中&＃xff0c;如果使用Vuex&＃xff0c;实际上数据还是单向的&＃xff0c;之所以说是数据双向绑定&＃xff0c;这是用的UI控件来说&＃xff0c;对于我们处理表单&＃xff0c;Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥&＃xff0c;在全局性数据流使用单项&＃xff0c;方便跟踪&＃xff1b;局部性数据流使用双向&＃xff0c;简单易操作。
3. 在表单中使用双向数据绑定
可以使用v-model指令在表单、、元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇&＃xff0c;但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据&＃xff0c;并对一些极端场景进行一些特殊处理。
注意&＃xff1a;v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源&＃xff0c;我们应该通过Javascript在组件的data选项中声明初始值。
3.1. 文本框
<body>
<div id&＃61;"app">
<input type&＃61;"text" v-bind:value&＃61;"searchMap.keyWord" />
<input type&＃61;"text" v-model&＃61;"searchMap.keyWord" />
<p>您要查询的是&＃xff1a;{{searchMap.keyWord}}p>
div>
<script src&＃61;"https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
new Vue({
el: &＃39;#app&＃39;,
data: {
searchMap:{
keyWord: &＃39;文本框的内容&＃39;
}
}
});
script>
body>
填写完毕后&＃xff0c;打开浏览器&＃xff0c;对比两个输入框&＃xff0c;查看效果。
3.2. 单复选框
<div id&＃61;"app">
单复选框&＃xff1a;
<input type&＃61;"checkbox" id&＃61;"checkbox" v-model&＃61;"checked">
<label for&＃61;"checkbox">{{ checked }}label>
div>
<script src&＃61;"https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
new Vue({
el: &＃39;#app&＃39;,
data: {
checked: false
}
});
script>
注&＃xff1a;当勾选时变true&＃xff0c;取消时变false。
3.3. 多复选框
示例1&＃xff1a;
多复选框&＃xff1a;
<input type&＃61;"checkbox" id&＃61;"checkbox" value&＃61;"吃饭" v-model&＃61;"checked">
<label>吃饭label>
<input type&＃61;"checkbox" id&＃61;"checkbox" value&＃61;"睡觉" v-model&＃61;"checked">
<label>睡觉label>
<input type&＃61;"checkbox" id&＃61;"checkbox" value&＃61;"打豆豆" v-model&＃61;"checked">
<label>打豆豆label><br />
<p>选中的值&＃xff1a;{{checked}}p>
<script src&＃61;"https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script> new Vue({ el: &＃39;#app&＃39;, data: { checked: [] }
});
script>
示例2&＃xff1a;
<div id&＃61;”app”>
//动态读取&＃xff0c;使用<label>嵌套
<label v-for&＃61;"opt in options" >
<input type&＃61;"checkbox" :value&＃61;"opt.value" v-model&＃61;"slb" />{{opt.text}}
label>
div>
<script src&＃61;"https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script type&＃61;"text/Javascript">var vue &＃61; new Vue({el:&＃39;#app&＃39;,data:{options:[{value:&＃39;A&＃39;, text:&＃39;吃饭&＃39;},{value:&＃39;B&＃39;, text:&＃39;睡觉&＃39;},{value:&＃39;C&＃39;, text:&＃39;打豆豆&＃39;},],slb : [&＃39;A&＃39;, &＃39;B&＃39;]}});
script>
3.4. 单选按钮
<body>
<div id&＃61;"app">
单选按钮&＃xff1a;
<input type&＃61;"radio" id&＃61;"one" value&＃61;"One" v-model&＃61;"picked">
<label for&＃61;"one">Onelabel>
<input type&＃61;"radio" id&＃61;"two" value&＃61;"Two" v-model&＃61;"picked">
<label for&＃61;"two">Twolabel>
<span>选中的值: {{ picked }}span>
div>
<script src&＃61;"https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script> new Vue({ el: &＃39;#app&＃39;, data: { picked: &＃39;&＃39; }});
script>
body>
3.5. 下拉框
<body>
<div id&＃61;"app">
下拉框&＃xff1a;
<select v-model&＃61;"selected">
<option disabled value&＃61;"">请选择option>
<option value&＃61;"北京">北京option>
<option value&＃61;"上海">上海option>
<option value&＃61;"深圳">深圳option>
select>
<span>选中的值: {{ selected }}span>
div>
<script src&＃61;"https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script> var vm &＃61; new Vue({ el: &＃39;#app&＃39;, data: { selected: &＃39;北京&＃39; } });
script>
body>
注意&＃xff1a;如果 v-model 表达式的初始值未能匹配任何选项&＃xff0c;
3.6. 下拉框多选时 (绑定到一个数组)
<div id&＃61;"example-6">
<select v-model&＃61;"selected" multiple style&＃61;"width: 50px;">
<option>Aoption>
<option>Boption>
<option>Coption>
select>
<br>
<span>Selected: {{ selected }}span>
div>new Vue({
el: &＃39;#example-6&＃39;,
data: {
selected: []}
})
3.7. v-for 渲染的动态选项
<select v-model&＃61;"selected">
<option v-for&＃61;"option in options" value&＃61;"option.value">{{ option.text }} option>
select>
<span>Selected: {{ selected }}span>new Vue({
el: &＃39;...&＃39;,
data: {
selected: &＃39;A&＃39;, #默认选中项
options: [
{ text: &＃39;One&＃39;, value: &＃39;A&＃39; },
{ text: &＃39;Two&＃39;, value: &＃39;B&＃39; },
{ text: &＃39;Three&＃39;, value: &＃39;C&＃39; }
]
}
})
总结&＃xff1a;
&＃xff08;1&＃xff09;只有表单相关的控件才是双向绑定&＃xff1b;
&＃xff08;2&＃xff09;用v-model实现双向绑定&＃xff1b;
&＃xff08;3&＃xff09;使用v-model实现双向绑定时会忽略一些属性&＃xff08;如value、checked、selected&＃xff09;的初始值。
4. v-bind和v-model的区别?
V-bind是单向数据绑定&＃xff1b;v-model是双向数据绑定
v-model: 其的改变影响其他&＃xff1b;而v-bind: 其的改变不影响其他。
v-bind就是对属性的简单赋值&＃xff0c;当内存中值改变&＃xff0c;还是会触发重新渲染。
![前端库Bootstrap框架：「11]使用 span 创建行内元素](https://img6.php1.cn/3cdc5/9921/243/17a6062cb49e163c.png)
京公网安备 11010802041100号