vue-cli: 绑定class和style

一. 绑定class和style

<template>
  <div>
    <!-- 绑定一个class -->
    <div :class="classA">绑定class</div>
    <!-- 通过数组的方式绑定多个class -->
    <div :class="[classA, classB]">通过数组绑定多个class</div>
    <!-- 通过对象的方式来绑定class -->
    <div :class="classObj">通过对象来绑定class</div>
    <div :class="{current: false, focus: true}">通过对象来绑定class</div>
    <div :class="{current: isCurrent, focus: isFocus}">通过对象来绑定class</div>
    <!-- 绑定style -->
    <div :style="{color: 'red', fontSize: '20px'}">绑定style</div>
    <div :style="{color: color, fontSize: ft}">绑定style</div>
    <div :style="styleObj">绑定style</div>
  </div>
</template>

<script>
export default {
  name: 'Demo2',
  data () {
    return {
      classA: 'current',
      classB: 'focus',
      classObj: {
        current: true,
        focus: false
      },
      isCurrent: true,
      isFocus: true,
      color: 'blue',
      ft: '40px',
      styleObj: {
        color: 'green',
        fontSize: '50px'
      }
    }
  }
}
</script>