用vue写这个现实显示隐藏的，怎么写方便而且快速呢？ 我每次都是用的jq

Question

用vue写这个现实显示隐藏的，怎么写方便而且快速呢？ 我每次都是用的jq类似于这种的我每次都是用的         //需要点击的东西循环            $(".ull>li").each(function(i){                //发生点击事件的时候                        $(this).click(function(){                            //哪里需要切换 切换的地方                            $(".p1>div").eq(i).show().siblings().hide();                            $(this).addClass("on").siblings().removeClass("on");                        })                    })                    现在我想用vue里面的写，我想给每个加个show的条件，但是那要需要写4个，很麻烦，请问有什么简单快速的方法吗?

Answer 1

你的意思tab加点击高亮么?

可以给tab 渲染的数据加属性 循环的时候设置data-index={{index}} 点击的时候处理 通过active属性渲染高亮class

data:{

tabIndex:0

}

var tabList=[{name:'a',active:true},{name:'a',active:false},{name:'a',active:false}]

changeTab:function(e){

    var index=e.target.getAttribute('data-index'),

    tabList[index].active=true

    tabList[this.data.tabIndex].active=false

}