vue中使用：class 动态绑定

<template>
  <div class="page">
    <a :href="'http://www.baidu.com/'">百度</a>
    <!-- 不支持动态改变  渲染后是class ="demo1 demo2" -->
    <div :class="'demo1  demo2'">你好</div>  
    <!-- 支持改变  渲染后是class="class-a"-->
     <div :class="classA">哈哈</div>
     <!-- 写在指令中的值会被视作表达式，因此v-bind:class接受三目运算 -->
     <div :class = "classB ? 'class_1':'class_2'" @click="text">三目运算</div>
     <!-- 键为class 通过 键值 控制是否显示 -->
     <div :class="{'class1':isA, 'class2':isB}">对象绑定</div>  
     <div :class = "[sz1,sz2]">数组绑定</div>
     <div :class="[A,objectClass]">数组中包含对象</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time:10,
      classA:'class-a',
      classB: false,
      isA:true,
      isB:true,
      sz1:'sz1',
      sz2:'sz2',
      A:"obj1",
      objectClass:{
       
      }
    }
  },
  methods:{
   text:function(){
    this.classB = !this.classB   //三目运算消失
    setInterval(() => {
      if(this.time >1){
        this.time--
        if(this.time==1){
         this.classB = !this.classB   //10s后又显示
        }
      }
    }, 1000);
    
   }
  },
  components: {

  }
}
</script>

<style scoped lang="">
.class-a{
  color:red;
}
.class_1{
  display: none;
}
</style>