vue实现点击后动态添加class及删除同级class vue单击呈现不同样式 vue点击选中不同样式

代码

html

<template lang="html">
  <div>
    <div
    @click="changeIndex(index)"
    v-for="(item,index) in arr"
    :class="{on:currentIndex===index}">
      {{item}}
    </div>
  </div>
</template>

js

<script>
export default {
  data(){
    return {
      arr:[
        "企业门户","企业定制","商城购物","微信公众号","机构院校"
      ],
      currentIndex:0
    }
  },
  methods:{
    changeIndex(index){
      this.currentIndex=index;
    }
  }
}
</script>

css

.on{
  color: red;
}

丑丑的写法，但是一看就能理解上面的意思

html

 <div class="caseSelect">
         <div  @click="changeIndex(1)"  :class="{on:currentIndex===1}">企业门户</div>
         <div @click="changeIndex(2)"  :class="{on:currentIndex===2}">企业定制</div>
         <div @click="changeIndex(3)"  :class="{on:currentIndex===3}">商城购物</div>
         <div @click="changeIndex(4)"  :class="{on:currentIndex===4}">微信公众号</div>
         <div @click="changeIndex(5)"  :class="{on:currentIndex===5}">机构院校</div> 
 </div>

methods

changeIndex(index){
      this.currentIndex=index;
    }

css

.on{
  color: red;
}

参考链接

感谢链接 也可以看下链接学习
https://www.jianshu.com/p/37d427be0da3