vue学习笔记--样式绑定的两种方式：对象和数组

目标：通过点击一段文字变换字体颜色

a.class对象绑定：
原理：通过控制dom的class 显示和隐藏

<style>
      .activated{
      color:red;
      }
</style>

<div @click="clickMe" :class="{activated:isActivated}">
  点击我变色
  </div>

<script>
  var vm =new Vue({
    el:"#app",
    data:{
       :isActivated:true;   
  },
  methods:{
    clickMe:function(){
     this.isActivated=!this.isActivated
}
}
  })
  //  this.isActivated=!this.isActivated 等价于
 // this.isActivated=this.isActivated===true?false :true
</script>

b.class数组形式

    <div @click="clickMe" :class="[activated]">
      点我变色
    </div>
    <script>
      var vm =new Vue({
       el:"#app",
       data:{
       activated: " "
    },
   methods:{
      clickMe:function(){
           this.activated =this.activated==="activated" ? " " :"activated"
    }
    }
    })
    </script>

3.style样式

a.class对象绑定：

  <div @click="clickMe" :style="styleText">
  点我变色
</div>
<script>
  var vm =new Vue({
     el:"#app"，
     data:{
        styleText:{
            color: ""
    }
        methods:{
        clickMe:function(){
          this.styleText.color= this.styleText.color===" " ? red :""
  }  
  }
    }
  })
</script>

b.数组

     <div @click="clickMe" :style="[styleText]">