Vue 中 class 与 style 绑定（五）

在数据绑定中，最常见的两个需求就是元素的样式名称 class 和 内联样式 style 的动态绑定，它们也是 html 的属性，因此可以使用 v-bind 指令。

1、绑定 class 的几种方式

（1）对象语法：

给 v-bind:class 设置一个对象，可以动态的切换 class，例如：

<template>
  <div id="app">
      <div :class="{'active': isActive}"></div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      isActive: true
    };
  }
};
</script>

上面示例中，类名 active 依赖于数据 isActive，当其为 true 时， div 会拥有类名 Active ，为 false 时则没有：

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

对象中也可以传入多个属性，来动态切换 class。另外，:class 可以与普通 class 共存，例如：

<template>
  <div id="app">
      <div class="static" :class="{'active':isActive, 'error': isError}"></div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      isActive: true,
      isError: false
    };
  }
  
};
</script>

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

当数据 isActive 或 isError 变化时，对应的 class 类名也会更新。比如当 isError 为 true 时，渲染后的结果为：

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

当 :class 的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的用法，一般当条件多于两个时，都可以使用 data 或 computed，例如使用计算属性：

<template>
  <div id="app">
      <div :class="classes"></div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      isActive: true,
      error: null
    };
  },
  computed: {
    classes: function() {
      return {
        active: this.isActive && !this.error,
        'text-color': true
      }
    }
  }
};
</script>

渲染结果为：
<div class="active text-color"></div>

（2）数组语法：

当需要应用多个 class 时，可以使用数组语法，给 :class 绑定一个数组，应用一个 class 列表：

<template>
  <div id="app">
      <div :class="[activeCls, errorCls]"></div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      activeCls: 'active',
      errorCls: 'error'
    }
  }
  
};
</script>

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

也可以使用三元表达式来根据条件切换 class，例如下面的示例：

<template>
  <div id="app">
      <div :class="[isActive ? activeCls : '', errorCls]"></div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      isActive: true,
      activeCls: 'active',
      errorCls: 'error'
    }
  }
  
};
</script>

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

样式 error 会始终应用，当数据 isActive 为真时，样式 active 才会被应用。class 有多个条件时，这些较为繁琐，可以再数组语法中使用对象语法：

<template>
  <div id="app">
      <div :class="[{'active': isActive}, errorCls]"></div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      isActive: true,
      errorCls: 'error'
    }
  }
  
};
</script>

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

当然，与对象语法一样，也可以使用 data，computed 和 methods 三种方法，以计算属性为例：

<template>
  <div id="app">
      <div :class="classes"></div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      size: 'large',
      disabled: true
    }
  },
  computed: {
    classes: function() {
      return [
        'btn',
        {
          ['btn-' + this.size]: this.size !== '',
          ['btn-disabled']: this.disabled
        }

      ]
    }
  }
  
};
</script>

以上示例中的样式 btn 会始终应用，当数据 size 不为空时，会应用样式前缀 btn-，后加 size 的值；当数据 disabled 为真时，会应用样式 btn-disabled，所以该示例最终渲染结果为：

<div class="btn btn-large btn-disabled"></div>

使用计算属性给元素动态设置类名，在业务中经常用到，尤其是在写复用的组件时，所以在开发过程中，如果表达式较长或逻辑复杂，应该尽可能的优先使用计算属性。

2、绑定内联样式

使用 :style 可以给元素绑定内联样式，方法与 :class 类似，也有对象语法和数组语法，看起来很像直接在元素上写 css：

<template>
  <div id="app">
    <div :style="{'color': color, 'fontSize': fontSize + 'px'}">文本</div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      color: 'red',
      fontSize: 14
    }
  }
  
};
</script>

css 属性名称使用驼峰命名（camelCase）或短横分隔命名（kebab-case），渲染后的结果为：

<div style="color: red; font-size: 14px;">文本</div>

大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在 data 或 computed 里，以 data 为例改写上面的示例：

<template>
  <div id="app">
    <div :style="styles">文本</div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      styles: {
        color: 'red',
        fontSize: 14 + 'px'
      }
    }
  }
  
};
</script>

应用多个样式对象时，可以使用数组语法：

<div :style="[styleA, styleB]">文本</div>

在实际业务中，:style 的数组语法并不常用，因为往往可以写在一个对象里面： 而较为常用的应当是计算属性。 另外， 使用 :style 时，Vue .js 会自动给特殊的 css 属性名称增加前缀， 比如transform。

 

 

参考：

《Vue.js 实战》

https://cn.vuejs.org/v2/guide/