Vue.js框架学习—数据绑定
Vue中有两种数据绑定的方法：
一、单项数据绑定(v-bind)
单项数据绑定用“v-bind”指令，数据只能从Vue实例的data属性流向页面，当data属性值发生变化，页面中对应的值也会随之变化，但页面中的值变化，不会对data属性值产生影响。
模板容器和Vue实例
<body> <div id=”root”> <input type=”text” v-bind:value=”name”> <span>{{name}}</span> </div></body><script> new Vue({ el:’#root’, data:{ name:’百度’ } })</script>
修改input框内的值，span标签内的值不会发生变化
修改input框内的值，Vue实例data中的name不会发生变化，因此span标签内的值也不会发生变化
v-bind指令的简写形式
<body> <div id=”root”> <input type=”text” :value=”name”> <span>{{name}}</span> </div></body><script> new Vue({ el:’#root’, data:{ name:’百度’ } })</script>
二、双向数据绑定(v-model)
双向数据绑定用“v-model”指令，数据不仅能从Vue实例的data属性流向页面，还可以从页面流向data属性，当data属性值发生变化，页面中对应的值也会随之变化，反之页面中的值变化，对应的data属性值也会随之变化。
模板容器和Vue实例
<body> <div id=”root”> <input type=”text” v-model:value=”name”> <span>{{name}}</span> </div></body><script> new Vue({ el:’#root’, data:{ name:’百度’ } })</script>
修改input框内的值，span标签内的值会随之发生变化
修改input框内的值，Vue实例data中的name值也会随之发生变化，从而引起span标签内的值发生变化
v-model指令的简写形式
<body> <div id=”root”> <input type=”text” v-model=”name”> <span>{{name}}</span> </div></body><script> new Vue({ el:’#root’, data:{ name:’百度’ } })</script>
注：双向绑定一般都应用在表单类元素上，如input、select等。
原创文章，作者：starterknow，如若转载，请注明出处：https://www.starterknow.com/126785.html
starterknow