javascript - vue2.0怎么实现点击头部显示当前盒子
本文介绍了javascript - vue2.0怎么实现点击头部显示当前盒子的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
如图,想实现点击分类、工艺显示下面的li,在jq可以使用$this,在vue2.0中该怎么实现?
解决方案
可以直接在分类按钮上面绑定个点击事件然后给列表弄上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
}
}
这篇关于javascript - vue2.0怎么实现点击头部显示当前盒子的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文