vue使用class添加动态类

<template>
  <d2-container>
    <h3>class使用测试页面</h3>
    <p :class="1 < 2 ? 'red-font' : 'blue-font'">使用三元表达式;</p>
    <p :class="['red-font','blue-bg']">使用数组包含多个类名;</p>
    <p :class="{'red-font':false,'blue-font':true}">使用对象的形式;</p>
    <p :class="redFont">使用变量的形式;</p>
  </d2-container>
</template>

<style lang="scss" scoped>
.red-font {
  color: red;
}
.blue-font {
  color: blue;
}
.blue-bg {
  background: blue;
}
</style>

<script>
export default {
  data () {
    return {
      redFont: 'red-font'
    }
  },
}
</script>