Class绑定v-bind:class——Vue.js

前言：数据绑定通过  v-bind 结合class 列表和内联样式style，只需要通过表达式计算出字符串结果即可，但字符串拼接麻烦且易错，可以用对象或数组

1. v-bind:class

传入对象：

（1）传入对象，动态的切换class

<div v-bind:class="{ active: isActive }"></div>

data: {
  isActive: true
}

如果data中的isActive属性是true，那么，class就会有active这个类选择器。

上面的语法表示 active 这个 class选择器 存在与否将取决于数据属性 isActive 的 truthiness（在JavaScript中，Truthy(真值)指的是在Boolean上下文中转换后的值为真的值。所有值都是真值，除非它们被定义为 falsy (即， 除了false，0，“”，null，undefined和NaN 外)。）

（2）在对象中传入更多属性来动态切换多个 class

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data: {
  isActive: true,
  hasError: false
}

（3）v-bind:class 指令也可以与普通的 class 属性共存

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

data: {
  isActive: true,
  hasError: false
}

结果渲染为：<div class="static active"></div>

（4）绑定的数据对象不必在标签中，标签中可以直接写一个对象名，对象值写在data中

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

（5）也可以绑定一个返回对象的计算属性，这是一个常用且强大的模式：

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

在计算属性computed中，定义了一个函数classObject，返回值是一个对象，而对象中的属性，又与data中的属性相关。这就是计算属性的特点。

注意：传入对象时，class根据情况取对象的属性名，而传入数组时，class根据情况取数组的属性值。

实例：点击切换样式（字体黑红切换）

    <div id="app">
        <span :class="{isRed: red}" @click="handleFontColor">Hello World</span>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                red: false,
            },
            methods: {
                handleFontColor(){
                    this.red = !this.red
                }
            }
        })
    </script>

传入数组：

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

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为：<div class="active text-danger"></div>

（7）也可以用三元表达式： 

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

这样写将始终添加 errorClass值对应的class样式，但是只有在 isActive 是 truthy 时才添加 activeClass值对应的class样式。

（8）在数组语法中也可以使用对象语法：

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

实例：点击切换样式 

    <div id="app">
        <span :class="[red]" @click="handleFontColor">Hello World</span>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                red: '',
            },
            methods: {
                handleFontColor(){
                    this.red === '' ? this.red = 'isRed' : this.red = ''
                }
            }
        })
    </script>

 组件上使用：

（9）

定义一个名为“my-component”的组件，模板是：<p class="foo bar">Hi</p>，模板中已经有类foo和bar

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

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

<my-component class="baz boo"></my-component>

HTML 将被渲染为:<p class="foo bar baz boo">Hi</p>

 （10）对于带数据绑定 class 也同样适用：

<my-component v-bind:class="{ active: isActive }"></my-component>

当 isActive 为 truthy时，HTML 将被渲染成为：<p class="foo bar active">Hi</p>