Vue初学--数据绑定

文章目录

• 一、Vue数据绑定有几种？
• 
  二、代码演示
  • 1.单项数据绑定
  • 2.双向数据绑定
• 总结

一、Vue数据绑定有几种？

分为两种：

        第一种：v-bind 单项数据绑定,数据只能从data流到页面。

        第二种：v-model 双项数据绑定,数据不仅会从data流向页面，也可以从页面流向data。

二、代码演示

1.单项数据绑定：

代码如下（示例）：

2.双向数据绑定

代码如下（示例）：

​​​​​​​

---

 

总结

一、v-bind 单项数据绑定：

                ①：数据只能从data流到页面。

                ②：v-blind：value简写为 ：value。

二、v-model 双项数据绑定：

                ①：数据不仅会从data流向页面，也可以从页面流向data。

                ②：v-model:value 简写为v-model，因为v-model默认收集就是Value值。

                ③：双向绑定一般都用在表单类元素上（如：input  ，select等）。