4.Vue双向绑定
Posted zhihaospace
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了4.Vue双向绑定相关的知识，希望对你有一定的参考价值。
1.什么是双向数据绑定
Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。
值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。
2.v-model
v-model 指令在表单 <input> 、 <textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
注意：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值!
语法： v-model="vue中需要展示的内容"
单行文本：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--view层模块--> 9 <div id="vue"> 10 单行文本：<input type="text" v-model="message" value="hello" /> 单行文本是：{{message}} 11 </div> 12 13 <!--导入Vue.js--> 14 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> 15 <script type="text/javascript"> 16 let vm = new Vue({ 17 el: ‘#vue‘, 18 data: { 19 message: "第一个Vue项目" 20 }, 21 22 }); 23 </script> 24 </body> 25 </html>
多行文本：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--view层模块--> 9 <div id="vue"> 10 多行文本：<textarea v-model="message"></textarea> 多行文本是：{{message}} 11 12 </div> 13 14 <!--导入Vue.js--> 15 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> 16 <script type="text/javascript"> 17 let vm = new Vue({ 18 el: ‘#vue‘, 19 data: { 20 message: "第一个Vue项目" 21 }, 22 23 }); 24 </script> 25 </body> 26 </html>
单选按钮：
注：v-model中绑定的属性的值必须与标签的value属性相同。
v-model中的sex：”男“ === input中的value=”男“相同
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--view层模块--> 9 <div id="vue"> 10 单选按钮： 11 <input type="radio" id="one" value="One" v-model="picked"> 12 <label for="one">One</label> 13 <input type="radio" id="two" value="Two" v-model="picked"> 14 <label for="two">Two</label> 15 <span>选中的值: {{ picked }}</span> 16 </div> 17 18 <!--导入Vue.js--> 19 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> 20 <script type="text/javascript"> 21 let vm = new Vue({ 22 el: ‘#vue‘, 23 data: { 24 picked: "One" 25 26 }, 27 28 }); 29 </script> 30 </body> 31 </html>
补充知识：
html的label标签的for属性绑定对应于input标签的id属性
当点击label标签时，就相当于点击了input标签让内容发生改变。
1 <input type="radio" id="one" value="One" v-model="picked"> 2 <label for="one">One</label> 3 <input type="radio" id="two" value="Two" v-model="picked"> 4 <label for="two">Two</label>
复选框：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--view层模块--> 9 <div id="vue"> 10 11 复选框： 12 <input type="checkbox" id="checkbox" v-model="checked"> 13 14 <label for="checkbox">{{ checked }}</label> 15 </div> 16 17 <!--导入Vue.js--> 18 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> 19 <script type="text/javascript"> 20 let vm = new Vue({ 21 el: ‘#vue‘, 22 data: { 23 // message: "第一个Vue项目" 24 checked: true 25 }, 26 27 }); 28 </script> 29 </body> 30 </html>
下拉框：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--view层模块--> 9 <div id="vue"> 10 下拉框： 11 <select v-model="selected"> 12 <option disabled value="">请选择</option> 13 <option>A</option> 14 <option>B</option> 15 <option>C</option> 16 </select> 17 <span>选中的值: {{ selected }}</span> 18 </div> 19 20 <!--导入Vue.js--> 21 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> 22 <script type="text/javascript"> 23 let vm = new Vue({ 24 el: ‘#vue‘, 25 data: { 26 selected: ‘‘ 27 }, 28 29 }); 30 </script> 31 </body> 32 </html>
以上是关于4.Vue双向绑定的主要内容，如果未能解决你的问题，请参考以下文章
VueVue入门--双向绑定，Vue的组件，Axios异步通信，计算属性，插值，自定义事件