vue-03-style与class

   <div>
      isActive 为true， 则显示 active css
      <p v-bind:class="{active: isActive}">哈哈</p>
    </div>

data() {
      return {
        isActive: true,
      }
    },

<!--可以绑定为对象-->
    <div>
      <p v-bind:class="styleObj"> 哈哈 </p>
    </div>

data() {
      return {
        styleObj: {
          active: true,
          ‘demo‘: true
        }
      }
    },

<div>
      <p v-bind:class="styleObj1"> 哈哈哈啊</p>
    </div>

computed: {
      styleObj1() {
        return {
          "active": this.isActive,
          "demo": this.isDemo
        }
      }
    }

<!--使用表达式绑定-->
    <ul>
      <li :class="[{active: index % 2 == 0}, ‘info-‘ + id]" v-for="(name, index) in names ">{{ name }}</li>
    </ul>

data() {
      return {
        isActive: true,
        isDemo: true,
        styleObj: {
          active: true,
          ‘demo‘: true
        },
        id: 10,
        demo1: "demo11",
        demo2: "demo22",
        names: [‘wenbronk‘, ‘vini‘, ‘lisa‘],
        stob: {
          color: "red",
          fontSize: "24px"
        }
      }
    },

<!--绑定内联样式-->
    <div>
      <p :style="stob"> 内敛样式 </p>
    </div>

stob: {
          color: "red",
          fontSize: "24px"
        }