vue学习(绑定class、v-bind:style(对象语法、数组语法))

1绑定 HTML Class

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

内联样式在模板里

通过浏览器查看，渲染的html结构是：

内联样式不在模板里

渲染为如下的结构：

绑定返回对象的计算属性

渲染的html结构如下：

数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

渲染为

``

###class 列表使用三元表达式
如果你也想根据条件切换列表中的 class，可以用三元表达式：

渲染为：
```

绑定内联样式v-bind:style

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象

{{ msg }}

直接绑定到一个样式对象通常更好，这会让模板更清晰：

{{ msg }}

对象语法常常结合返回对象的计算属性使用

{{ msg }}

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表

{{ msg }}