可以直接在分類按鈕上面綁定個點擊事件然后給列表弄上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
}
}