东莞网站seo优化托管,网站建设展滔科技大厦,东莞飞天网站设计公司,单位如何做网站宣传之前通过v-bind来完成的数据绑定#xff0c;属性值和表达式进行绑定#xff0c;表达式的值发生变化了属性值也跟着发生变化。
单向数据绑定#xff1a;
!DOCTYPE html
html
headmeta charsetUTF-8title首页/titl…之前通过v-bind来完成的数据绑定属性值和表达式进行绑定表达式的值发生变化了属性值也跟着发生变化。
单向数据绑定
!DOCTYPE html
html
headmeta charsetUTF-8title首页/titlescript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
/headbody div idapp单向数据绑定input typetext v-bind:valuename /divscript typetext/javascript Vue.config.productionTip false new Vue({ el: #app, data:{ name: lucas,}})/script/body
/html v-bind最大特点就是单向数据绑定修改了data里面的值容器里面的值也会跟着改变但是修改容器里面的值data里面的值是不会发生变化的。 还有另外一个指令可以完成双向的绑定。也就是页面中的值发生变化还能够影响到data的值这就需要使用v-model指令了。
!DOCTYPE html
html
headmeta charsetUTF-8title首页/title!--引入vue,这里引入vue那么这里就多了vue构造函数--script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
/headbody div idapp单向数据绑定input typetext v-bind:valuenamebr双向数据绑定input typetext v-model:valuename/divscript typetext/javascript Vue.config.productionTip false new Vue({ el: #app, data:{ name: lucas,}})/script/body
/html
但是需要注意的是v-modle是不能使用在如h2这种标签上面的。v-model只能应用在表单类元素上输入类元素也就是得有value值才行。
随着输入删除你的value值是在发生改变的而h2这种标题类型的是不能够输入的。不能够输入就是没有value值没有value值就证明不能捕获用户的输入连输入的值都不能捕获那怎么可能影响数据的变化呢所以这就是v-model的设计意义和value值绑定。
input 单选框 多选框 select框 多行输入 有很多的表单元素这些表单元素都有一个特点就是都有value值因为v-model就是对value进行说话。 h1 v-model:xname/h1 Vue中有2种数据绑定的方式 1.单向绑(v-bind):数据只能从data流向页面单方向 2.双向绑定(V-mode1):数据不仅能从data流向页面还可以从页面流向data双方向 备注 1.双向绑定一般都应用在表单类元素上(如input、select等) 2.v-model:value可以简写为v-model因为v-mode1默认收集的就是value值 最后简写如下 div idapp单向数据绑定input typetext :valuenamebr双向数据绑定input typetext v-modelname/div
