首页新闻找找看学习计划

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

0
悬赏园豆: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>
大神老姜的主页 大神老姜 | 初学一级 | 园豆:132
提问于:2017-08-22 15:52
< >
分享
最佳答案
1
//模板代码
<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
张泰峰 | 初学一级 |园豆:14 | 2017-08-22 16:07
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册