vue2.0怎么实现点击头部显示当前盒子

Question

如图，想实现点击分类、工艺显示下面的li，在jq可以使用$this，在vue2.0中该怎么实现？

Answer 1

可以直接在分类按钮上面绑定个点击事件然后给列表弄上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
                        }
                    }

Answer 2

用v-show会不会成本低些