鍍金池/ 問答/HTML/ 用vue寫這個現(xiàn)實顯示隱藏的，怎么寫方便而且快速呢？ 我每次都是用的jq

用vue寫這個現(xiàn)實顯示隱藏的，怎么寫方便而且快速呢？ 我每次都是用的jq

用vue寫這個現(xiàn)實顯示隱藏的，怎么寫方便而且快速呢？ 我每次都是用的jq

類似于這種的

clipboard.png

我每次都是用的

         //需要點擊的東西循環(huán)
            $(".ull>li").each(function(i){
                //發(fā)生點擊事件的時候
                        $(this).click(function(){
                            //哪里需要切換 切換的地方
                            $(".p1>div").eq(i).show().siblings().hide();
                            $(this).addClass("on").siblings().removeClass("on");
                        })
                    })

現(xiàn)在我想用vue里面的寫，我想給每個加個show的條件，但是那要需要寫4個，很麻煩，請問有什么簡單快速的方法嗎?

回答
編輯回答
做不到

你的意思tab加點擊高亮么?
可以給tab 渲染的數(shù)據(jù)加屬性 循環(huán)的時候設置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
}
2018年7月31日 11:20
編輯回答
孤島

有個最簡單的做法就是，你給每一個tab綁定一個方法然后根據(jù)不同tab item傳不同的參數(shù)，比如 @click="changeTab(0)"，然后changeTab方法里面把對應的dom顯示，大致如下：

<!-- html -->
<ul>
    <li @click="changeTab(0)">班組信息</li>
    <li @click="changeTab(1)">班次信息</li>
    <li @click="changeTab(2)">輪班模板</li>
    <li @click="changeTab(3)">輪班次序</li>
</ul>
<div class="contain">
    <div class="tab-0" v-if="tab == 'tab-0'">班組信息</div>
    <div class="tab-1" v-if="tab == 'tab-1'">班次信息</div>
    <div class="tab-2" v-if="tab == 'tab-2'">輪班模板</div>
    <div class="tab-3" v-if="tab == 'tab-3'">輪班次序</div>
</div>

/* js */
exprot default {
    data (){
        return{
            tab: 'tab-0'
        }
    },
    methods: {
        changeTab (id){
            this.tab = `tab-${id}`
        }
    }
}
2018年7月8日 13:53