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>