Vue中的数据绑定

一、v-bind单向数据绑定

单向数据绑定中,数据只能由data流向页面。

v-bind:属性名="data变量"   或简写为   :属性名="data变量"

Vue中的数据绑定_第1张图片

 我们修改data中的iptvalue值,页面input框中的value值改变。 

Vue中的数据绑定_第2张图片

 而我们修改input框中的value值,data中的iptvalue值并不会改变。

Vue中的数据绑定_第3张图片

 二、v-model双向数据绑定

单向数据绑定中,数据不仅能从data流向页面,还能从页面流向data。

Vue中的数据绑定_第4张图片

  我们修改data中的iptvalue值,页面input框中的value值改变。 

Vue中的数据绑定_第5张图片

  我们修改input框中的value值,data中的iptvalue值也会改变。

Vue中的数据绑定_第6张图片 

你可能感兴趣的:(Vue,vue.js,前端,javascript)