Class 与 Style 绑定

在使用 Vue 开发项目时，经常会有操作元素 class 和 style 的需求，比如，开发 Tab 组件时通过切换元素的 class 展示被选中的样式，或者有时需要直接更改组件中元素的内联样式。

绑定 Class

字符串语法

v-bind:class 绑定的表达式计算结果可以是字符串，比如：

<template>
  <div :class="activeClass">绑定 HTML Class</div>
</template>

<script>
export default {
  data () {
    return {
      activeClass: 'active'
    }
  }
}
</script>

结果渲染如下图： Class 与 Style 绑定

同时，使用字符串语法也可以绑定多个 class，代码如下：

<template>
  <div :class="classes">绑定多个 class</div>
</template>

<script>
export default {
  data () {
    return {
      classes: 'xxx yyy zzz'
    }
  }
}
</script>

结果渲染如下图： Class 与 Style 绑定

此外，绑定的表达式也可以复杂一点，只要表达式计算结果是字符串即可：

<template>
  <button :class="type && `button-${type}`">按钮</button>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'primary'
    }
  }
}
</script>

在页面中使用按钮组件后结果渲染如下图： Class 与 Style 绑定

v-bind:class 指令可以与普通的 class attribute 共存，有如下模板：

<template>
  <button class="button" :class="type && `button-${type}`">按钮</button>
</template>

结果渲染如下图： Class 与 Style 绑定

对象语法

绑定 class 时，也可以传给 v-bind:class 一个对象，以动态地切换 class：

<template>
  <div :class="{ active: isActive }" />
</template>

在上述代码中，active class 是否存在取决于数据 property isActive 值的真假。比如，当 isActive 值为真时，结果渲染如下图： Class 与 Style 绑定

同时，也可以在对象中传入更多的字段来动态切换多个 class。而且，绑定 class 的对象语法也可以和普通的 class attribute 共存。比如，有如下模板：

<template>
  <div class="demo" :class="{ active: isActive, disabled: isDisabled, loading: isLoading }" />
</template>

<script>
export default {
  data () {
    return {
      isActive: true,
      isDisabled: false,
      isLoading: true
    }
  }
}
</script>

最终渲染结果如下图： Class 与 Style 绑定

当数据对象中 isActive、isDisabled、isLoading 有变化时，class 列表会动态更新，当有如下修改时：

<script>
export default {
  data () {
    return {
      isActive: false,
      isDisabled: true,
      isLoading: false
    }
  }
}
</script>

class 列表将变成下图： Class 与 Style 绑定

在使用对象语法时，也可不必将对象内联在模板里：

<template>
  <div class="demo" :class="classObject" />
</template>

<script>
export default {
  data () {
    return {
      classObject: {
        active: true,
        disabled: false,
        loading: true
      }
    }
  }
}
</script>

在页面上渲染结果如下图： Class 与 Style 绑定

在 v-bind:class 中也可以绑定一个返回对象的计算属性，这是一种更常用且强大的模式：

<template>
  <div class="demo" :class="classObject" />
</template>

<script>
export default {
  data () {
    return {
      isActive: true,
      isDisabled: false,
      isLoading: true
    }
  },
  computed: {
    classObject () {
      const { isActive, isDisabled, isLoading } = this
      return {
        active: isActive,
        disabled: isDisabled,
        loading: isLoading
      }
    }
  }
}
</script>

数组语法

在绑定 class 时，也可以传一个数组给 v-bind:class，以应用一个 class 列表：

<template>
  <div class="demo" :class="[activeClass, loadingClass]" />
</template>

<script>
export default {
  data () {
    return {
      activeClass: 'active',
      loadingClass: 'loading'
    }
  }
}
</script>

最终结果渲染如下图： Class 与 Style 绑定如果要在数组语法中根据条件切换不同的 class，可以使用三元表达式：

<template>
  <div class="demo" :class="[isActive ? 'active' : '']" />
</template>

此时，active class 是否存在取决于数据 property isActive 值的真假。此外，也可以在数组语法中使用字符串语法、对象语法，而且配合返回一个数组的计算属性使用是更强大的模式：

<template>
  <button class="demo" :class="classList">按钮</button>
</template>

<script>
const prefixClass = 'w-button-'

export default {
  name: 'WButton',
  props: {
    iconPosition: {
      type: String,
      validator (value) {
        return oneof(value, ['left', 'right'])
      }
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    classList () {
      const { iconPosition, loading } = this
      return [
        iconPosition && `${prefixClass}icon-${iconPosition}`,
        { [`${prefixClass}loading`]: loading }
      ]
    }
  }
}
</script>

用在组件上

当在自定义组件上使用 class 时（不管是否使用 v-bind 绑定），这些 class 会被添加到组件的根元素上。同时，这个根元素上已经存在的 class 不会被覆盖。比如，有如下自定义组件：

<template>
  <div class="xxx">自定义组件</div>
</template>

<script>
export default {
  name: 'MyComponent'
  // ...
}
</script>

在使用组件时，添加 class：

<my-component class="xxx" :class="[{active: isActive}, 'yyy']" />

如果 isActive 的值为真，那么结果渲染如下图： Class 与 Style 绑定

绑定 Style

字符串语法

v-bind:style 绑定的表达式计算结果可以是字符串，用以在元素上添加内联样式。同时，v-bind:style 可以和普通的 style attribute 共存，有如下模板：

<template>
  <div style="background: yellowgreen" :style="styleString">绑定 Style</div>
</template>

<script>
export default {
  data () {
    return {
      // 字符串语法拼接麻烦且容易出错
      styleString: 'color: red; font-size: 20px;'
    }
  }
}
</script>

结果渲染如下图： Class 与 Style 绑定

对象语法

绑定 style 时，可以传给 v-bind:style 一个对象，用以添加内联样式。在这个对象中，CSS property 名可以使用驼峰式或者短横线分隔（用引号括起来）来命名，有如下模板：

<template>
  <div style="color: red;" :style="{ fontSize: fontSize }">绑定 Style</div>
  <!-- <div style="color: red;" :style="{ 'font-size': fontSize }">绑定 Style</div> -->
</template>

<script>
export default {
  data () {
    return {
      fontSize: '22px'
    }
  }
}
</script>

结果渲染如下图： Class 与 Style 绑定

此外，对象不必内联到模板中，直接绑定一个样式对象是更好的选择，这会让模板更清晰：

<template>
  <div style="color: red;" :style="styleObject">绑定 Style</div>
</template>

<script>
export default {
  data () {
    return {
      styleObject: {
        fontSize: '22px'
      }
    }
  }
}
</script>

同样的，配合使用一个返回对象的计算属性是更常用且强大的模式。

数组语法

绑定 style 时，也可以传一个数组，数组中可以包含多个样式对象：

<template>
  <div style="color: red;" :style="[baseStyle, spcialStyle]">绑定 Style</div>
</template>

<script>
export default {
  data () {
    return {
      baseStyle: {
        fontSize: '24px'
      },
      spcialStyle: {
        background: 'skyblue'
      }
    }
  }
}
</script>

结果渲染如下图： Class 与 Style 绑定