VUE学习03--VUE数据绑定（绑定数据，绑定属性，绑定样式，双向数据绑定）

今天我们一起来学一学 VUE的绑定。

一、数据绑定

首先可以先把数据定义在Vue页面中的

二、属性绑定

绑定属性主要使用 v-bind命令。 如：

也可以使用省略写法 :  如: 

具体示例代码如下：

样式绑定：

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

内联CSS也可称为行内CSS或者行级CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用，可以查找代码中bug。内联样式的优先级比选择器优先级要高，且不能重用，请谨慎使用~

四、双向数据绑定

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

下面是一个简单的示例，大家可以尝试一下，就会明白其中含义。

 

喜欢的朋友欢迎点赞，评论，关注哦~~