亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

vue2.0怎么實現點擊頭部顯示當前盒子

vue2.0怎么實現點擊頭部顯示當前盒子

HUH函數 2018-10-11 15:10:41
如圖,想實現點擊分類、工藝顯示下面的li,在jq可以使用$this,在vue2.0中該怎么實現?
查看完整描述

1 回答

?
慕少森

TA貢獻2019條經驗 獲得超9個贊

可以直接在分類按鈕上面綁定個點擊事件然后給列表弄上v-if

HTML:

 <div v-on:click="show=!show">分類</div>
    <ul v-if="show">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

當然,show這個變量也不要忘了在dada中定義。

v-if的介紹可以看這里


回答下面的評論:

大概的思路是用兩個v-for把你的大分類和分類下的列表渲染出來(還有在每個大分類下定義show變量),然后在點擊事件中傳入對應的i,用于改變對應的show。也可以參考樓下的,為了提高性能,可以把v-if換成v-show

HTML:

<div v-for="(menu,i) in menus" @click="change(i)">{{menu.title}}
    <ul v-if="menu.show">
        <li v-for="list in menu.lists">{{list}}</li>
    </ul>
</div>

script:

...    data: {                menus: [{
                            title: "分類",
                            show:false,
                            lists: [1, 3, 4]
                        }, {                            title: "工藝",
                            show:false,
                            lists: [1, 3, 4]
                        }]
                    },                    methods: {                        change: function(i) {
                            this.menus[i].show=!this.menus[i].show
                        }
                    }


查看完整回答
反對 回復 2018-11-15
  • 1 回答
  • 0 關注
  • 750 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號