vue学习笔记 | 五、v-bind指令学习以及用其绑定class、style的两种方式

v-bind指令

前面我们学习的指令主要作用是将值插入到我们模板的内容当中

但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定

• 比如动态绑定a元素的href属性

• 比如动态绑定img元素的src属性

这个时候，我们可以使用v-bind指令：

• 作用：动态绑定属性

• 缩写：    ：

• 预期：any(with argument)|object (without argument)

• 参数：attrOrProp(optional)

下面，我们就具体来学习v-bind的使用

v-bind绑定class(对象语法）

绑定方法：对象语法

对象语法的含义是：class后面跟的是一个对象

对象语法有下面这些用法：

• 用法一：直接通过{}绑定一个类

• 

• 用法二：也可以通过判断，传入多个值

• 

• 用法三：和普通的类同时存在，并不冲突

• 

• 方法四：如果过于复杂，可以放在一个methods和computed中

• 

v-bind绑定class(数组语法)

绑定方式：数组语法

数组语法的含义是：class后面跟的是一个数组

数组语法有下面这些用法

• 用法一：直接通过[]绑定一个类

• 

• 用法二:也可以传入多个值

• 

• 用法三：和普通的类同时存在，并不冲突

• 

• 方法四：如果过于复杂，可以放在一个methods和computed中

• 

v-bind绑定style（对象语法、数组语法）

我们可以利用v-bind:style来绑定一些css内联样式

在写css属性名的时候，比如font-size

• 我们可以使用驼峰式 fontSize

• 或短横线分隔‘font-size’

绑定style 有两种方式

• 对象语法

• 

• 数组语法

•