动态class和style

[Twlig]

动态class

实现动态class有对象语法和数组语法两种。

• 对象语法

  对象内属性值为true的属性名会被渲染为元素的class名。

  1. 内联模板定义class对象

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

     上面的语法表示 active 这个 class 存在与否将取决于数据 isActive 是否为true。text-danger存在与否将取决于数据 hasError 是否为true。

     当isActive=true，hasError=false 时，渲染结果如下：

     <div class="static active"></div>

  2. data中定义class对象

     <div v-bind:class="classObject"></div>
     data: {  //简写，实际是Vue实例内部的data
     classObject: {
      active: true,
      'text-danger': false //active和'active'一样都会被识别为属性名字符串
     }
     } 

     渲染结果同上。

  3. 计算属性定义class对象

     计算属性可以进行复杂的计算

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

• 数组语法

  数组中的元素渲染为元素class名

  1. 基础数组

     <div v-bind:class="[activeClass, errorClass]"></div>
     data: {
     activeClass: 'active',
     errorClass: 'text-danger'
     }

     渲染为：

     <div class="active text-danger"></div>

  2. 数组内嵌三元表达式

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

     根据isActive是true还是false决定数组的第一个元素是响应式数据activeClass还是''

  3. 数组内嵌对象

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

动态style

• 对象语法

  1. 内联模板定义style

     CSS property 名可以用驼峰式或短横线分隔 (kebab-case，记得用引号''括起来否则会报错) 来命名：

     <div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>
     data: {
     activeColor: 'red',
     fontSize: 30
     }

  2. 在data中定义style对象

     <div v-bind:style="styleObject"></div>
     data: {
     styleObject: {
      color: 'red',
      'font-size': '13px'
     }
     }

  3. 计算属性定义style

     <div v-bind:style="styleObject"></div>
     data: {
     isActive: true
     },
     computed: {
     styleObject: function () {
      return {
        color: this.isActive ? 'red' : 'blue',
        'font-size': this.isActive ? '10px' : '20px'
      }
     }
     }

• 数组语法

  v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

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