用vue如何实现这样的筛选功能

Question

如图所示，需要监听好多元素的点击事件，用jquery的话需要频繁操作dom,但是也有好处，那就是$("li).click(function(){}),即可让每个li监听点击事件，代码简洁，如果用vue该如何实现，难道要为每个元素都bonclick事件吗？例如（看着好繁琐）

<ul class="meishia-w" id="meishia">
        <li v-on:click="meishia(this)"><div  class="meishi1">全部分类 <span class="xiaobiao">1225></span></div></li>
        <li v-on:click="meishia(this)"><div  class="meishi2">美食 <span class="xiaobiao">1225></span></div></li>
        <li v-on:click="meishia(this)"><div  class="meishi3">电影 <span class="xiaobiao">1225></span></div></li>
        <li v-on:click="meishia(this)"><div  class="meishi4">酒店 <span class="xiaobiao">1225></span></div></li>
        <li v-on:click="meishia(this)"><div  class="meishi5">休闲娱乐 <span class="xiaobiao">1225></span></div></li>
        <li v-on:click="meishia(this)"><div  class="meishi6">KTV <span class="xiaobiao">1225></span></div></li>
        <li v-on:click="meishia(this)"><div  class="meishi7">丽人 <span class="xiaobiao">1225></span></div></li>
        <li v-on:click="meishia(this)"><div  class="meishi8">外卖 <span class="xiaobiao">1225></span></div></li>
    </ul>

问一个非vue的问题：点击美食弹出分类，点击美食分类的左侧分类，被点击的高亮，然后又弹出该分类的下级分类即右侧的小天鹅列表，这种效果用jquery很容易实现，用原生js如何实现呢

再来一弹：

滑动分类的时候 如何防止body也跟着滑动（很经典的移动端问题）

Answer 1

可以酱紫

template

<ul class="meishia-w" id="meishia">
        <li v-for="item in cate" v-on:click="getData(item.key)">
                <div>{{item.name}} <span class="xiaobiao">{{item.count}}</span></div>
        </li>
    </ul>

script

  <script type="text/javascript">
            export default{
                    data:{
                            return {
                                    cate:[
                                            {name:"全部分类",count:"1000",key:"all"},
                                            {name:"美食",count:"100",key:"meishi"},
                                            {name:"电影",count:"100",key:"dianying"},
                                            {name:"酒店",count:"100",key:"jiudian"}
                                    ]
                            }
                    },
                    methods:{
                            getData(key){
                                    ajax.get({
                                            url:"xx",
                                            key:key
                                    })
                            }
                    }
            }
    </script>

Answer 2

把事件绑定到ul上面做事件委托