Vue学习笔记之class style绑定

参考官网   https://cn.vuejs.org/v2/guide/list.html

1.绑定class：

a 对象语法：

<div

  class="static"

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

></div>

绑定的数据对象不必内联定义在模板里：

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

data: {

  classObject: {

    active: true,

    'text-danger': false

  }

}

我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

<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'

    }

  }

}

b 数组语法：

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

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

data: {

   isActive: 'active',

  errorClass: 'text-danger'

}

 

2.绑定内连样式style

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

<div v-bind:style="styleObject"></div>

data: {

  styleObject: {

    color: 'red',

    fontSize: '13px'

  }

}

b 数组语法：

<div v-bind:style="[baseStyles, overridingStyles]"></div>