数据绑定
1.单项数据绑定:
v-bind:
举例:
<template> 单项数据绑定:<inputtype="text"v-bind:value="name"></template>
<script>data(){ return{ name:'lqj' } } </script>
以上的结果是在浏览器中如果在input框中输入东西是,vue开发者工具中的vc中的值
是不会改变的,这就是单向绑定(只能由vue开发者工具向dom之中传递数据)
2.双向数据绑定:
v-model:
举例:
<template> 双项数据绑定:<inputtype="text"v-model:value="name"></template>
<script>data(){ return{ name:'lqj' } } </script>
·以上的结果是在浏览器中如果在input框中输入东西时,我们会发现vue开发者工具中的vc里面的值
·会跟着input框中的数据改变而改变!
·如果此时我们同时写了两个绑定事件(v-bind:和v-model:)这时我们要是改变v-model:的input框中的数据
·v-bind:的input框中的数据也会随之改变,因为这是一个连锁反应:
·因为v-model:可以改变vue开发者工具里面的数据,而v-bind:中的数据时随着vue开发者工具里面的数据变化而变化的
·所以v-model:的数据改变会间接带动v-bind:的数据所改变!
·注意:v-model:这个双向绑定只能应用到表单类元素上(输入类元素)
总结:vue2有两种数据绑定的方式:
1.单项数据绑定(v-bind:)数据只能从data流向页面。
2.双向数据绑定(v-model:)数据不仅可以从data流向页面,还可以从页面流向data。
备注:
1.双向绑定一般都是应用在表单雷元素上(如:input、select等)
2.v-model:value可以简写成v-model,因为v-model默认收集的就是value值。