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

绑定 HTML Class

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

内联样式在模板里

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

内联样式不在模板里

渲染为如下的结构：

绑定返回对象的计算属性

渲染的html结构如下：

数组语法

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

class 列表

渲染为

class 列表使用三元表达式

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

渲染为：

class 列表使用对象语法

渲染为：

class 综合练习

  

    
这是一个很大很大的H1，大到你无法想象！！！

    
    
这是一个很大很大的H1，大到你无法想象！！！

    
    
这是一个很大很大的H1，大到你无法想象！！！

    
    
这是一个很大很大的H1，大到你无法想象！！！

    
    
这是一个很大很大的H1，大到你无法想象！！！


  

  

用在组件上

1、例如，如果你声明了这个组件：

Vue.component('my-component', {
  template: '
Hi
'
})

然后在使用它的时候添加一些 class：

HTML 将被渲染为:

Hi

2、对于带数据绑定 class 也同样适用：

当 isActive 为 truthy[1] 时，HTML 将被渲染成为：

Hi

绑定内联样式v-bind:style

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

{{ msg }}

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

{{ msg }}

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

{{ msg }}

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

{{ msg }}

浏览器渲染结果如下：