vue动态类名实例--Button点击高亮

1.动态绑定class类名

  <div v-bind:class='box1'></div>

动态绑定class类名有两种语法:
一个是对象语法： :class=’{key:value}’
key代表的就是 类名,value控制key是否要被添加，如果返回true则添加，否则不添加
一个是数组语法：:class=’[“box3”,{“box4”:1>2}]’

原理：在data中定义个初始值为零（或者为空都可以），通过v-for循环知道每个button的index，设置@click，把点击对应的index给刚在在data中定义的为0的那个值，在:class中的value进行判断是否为true。

1.button的名字是遍历上去的
下面是完整的代码块

<template>
    <div id="app">
      <button
      v-for="(item,index) of arr"
      :key="index"  
      @click="Indexx(index)"
      class="CColor"
      :class="{' ColorChang':num==index}"
      >{{item.name}}</button>
</div>
</template>

<script>
export default{
    name:'About',
    data(){
        return{         
            num:0,
            arr:[
                {name:"我的"},
                {name:"你的"},
                {name:"他的"}
            ] 
        }
    },
    methods:{
        Indexx(index){
            this.num= index;
        }
    }
}
</script>


 <style>
 .CColor{
    color: darkcyan;
}
.ColorChang{
   color: crimson;
}

</style>

2.button的名字是单独的
下面是完整的代码块

<template>
  <div>
     <button class="CClass" :class="{'Cclass':num==1}" @click="Cclick(1)">按钮1</button>
     <button class="CClass" :class="{'Cclass':num==2}" @click="Cclick(2)">按钮2</button>
     <button class="CClass" :class="{'Cclass':num==3}" @click="Cclick(3)">按钮3</button>
     <button class="CClass" :class="{'Cclass':num==4}" @click="Cclick(4)">按钮4</button>
  </div>
</template>

<script>
export default {
 data(){
     return{
      num:0
     }
 },
 methods:{
   Cclick(index){
      //  把Cclick函数传的参数给对应的num
       this.num=index
   }
 },
 mounted(){

 }
}
</script>

<style>
/* 本身样式 */
  .CClass{
    color: rgb(248, 248, 248);
    background-color: darkorange;
    border: 2px solid rgb(194, 110, 8);
    margin-left: 8px;
  }
  /* 动态类名点击样式 */
  .Cclass{
      color: rgb(247, 247, 247);
      background-color: cornflowerblue;
      border: 2px solid rgb(68, 106, 177);
  }
/* hover时的样式 */
  .CClass:hover{
    color: brown;
  }
</style>