vue实现分类目录效果

 

 

cateAll(){

this.classId=""; this.bus.$emit("classidchange", this.classId); this.flag=true; if(this.$route.query.id){ this.$router.push({path: '/weblist', query: {classid: this.classId}}) } }, setScale(val,index){ this.flag=false; this.currentIndex=index; this.classId=val.classId; this.bus.$emit("classidchange", this.classId); if(this.$route.query.id){ this.$router.push({path: '/weblist', query: {classid: val.classId}}) } },   <div class="cate_title">分类目录</div> <ul> <li @click="cateAll()" :class="{on:flag==true}">全部分类 ({{result}}) </li> <li v-for="(cate, index) in tableCate" :key="index" @click="setScale(cate,index)" :class="{on:index==currentIndex && flag == false }"> {{cate.className}} ({{cate.sum}}) </li> </ul>   公用右侧组件 列表当前路由通过bus传送、接收当前classid this.bus.$on( "classidchange", function(e) { console.log(111, e); this.classId = e; this.getList(); }.bind(this) ); 详情通过路由跳转，传递当前classid  

标签：classId,classid,vue,val,效果,bus,分类目录,classidchange,query
来源： https://www.cnblogs.com/fangfang-2020/p/14005603.html