v-for循环中点击当前元素高亮显示

 

<a v-for="(cate,index) in categlory" :key="cate.id" @click="queryAppsByCate (cate.id,index)" :class="{active:index==isActive}">
　　{{cate.name}}
</a>

　　

定义isActive=0，默认高亮第一个元素

data () {
    return {
      isActive: 0
    }
  },

　　

方法里改变isActive的值，使其=index，从而使index==isActive条件成立，当前点击元素添加active样式，其他元素则不显示active样式。

queryAppsByCate (param, index) {
      ......
      this.isActive = index
    },

　

 

附：

v-for限制循环条数

<a class="tags" v-if="index < 3" v-for="(item, index) in app.tags" :key="item.key">
    {{ item.name }}
</a>