Vue中class与style的绑定

1、对象形式绑定

   v-bind:class="{active:isActive}"  // isActive为data中的数据

   v-bind:class="classObject"

对应的data如下：

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

可以使用computed返回对象的计算属性，绑定到class

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

2、数组形式绑定

   v-bind:class="[activeClass,errClass]"

对应的data如下：

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

3、可以在class中使用三元表达式

   v-bind:class="[isActive ? activeClass : '', errorClass]"
   v-bind:class="[{ active: isActive }, errorClass]"

4、用在组件上

当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。

5、style的绑定

style与class类似，style可以绑定一个包含多值得数组

   <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。