Vue2.0 v-for操作DOM对象怎样实现类似jQuery的addClass('active').siblings().removeClass('active')

悬赏园豆：5 [已解决问题] 解决于 2017-08-22 16:47

循环的代码如下，需要实现的功能是点击哪条就高亮哪条（增加CSS样式:active），同级别的其他条目去掉高亮（删除CSS样式:active）。

只知道用jQuery做，初学Vue2，不知怎么实现，请高手指点。

<div name="zjdcolumn" v-on:click="highlight1(zjditem1.id,zjditem1.name)" class="column5-2" :class="{active: isActive}" data-parentval="x1" data-parenttxt="xx区" v-for="zjditem1 in zjditems1" :data-val="zjditem1.id">{{zjditem1.name}}</div>

v-for

大神老姜 | 初学一级 | 园豆：132
提问于：2017-08-22 15:52

< >

最佳答案

//模板代码
<template v-for="(nav,index) in navlist">
    <li @click="setActive" :data-index="index" :class="{'active':index == navActive}">1</li>

</template>

//js一部分代码  

new Vue({
   data:{
   navActive:0 //默认第一个高亮
},
method:{
    setActive:function(event){
        var target = event.target;
        var index = Number(target.getAttribute("data-index"));
       this.navActive = index;
   }
  }
})

应该是这样实现的

渲染的时候：class用对象的形式，判断data中的选中索引，点击时更改索引，代码是盲打的，没测过哟，有问题再回复

收获园豆：5

张泰峰 | 初学一级 |园豆：20 | 2017-08-22 16:07

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

Vue2.0 v-for操作DOM对象怎样实现类似jQuery的addClass('active').siblings().removeClass('active')

欢迎，请先登录或者注册。