本文实例为大家分享了vue2.0实现选项卡导航效果的具体代码,供大家参考,具体内容如下
1:背景是一个web端的电商网站,根据点击的导航选项卡呈现不同得种类商品,首先这里说下我的路由结构是导航是一个组件,选项卡的内容又是单独的一个组件。
这是导航组件的内容,这里主要通过v-for循环生成导航,没什么好说的,需要注意的是,这因为选项卡需要知道用户所点击的是哪个模块,所以在数据中有个typeId属性,这里需要把该属性值传给选项卡组件。
<template> <ul class="nav"> <li v-for="nav in navs" :id="nav.typeId" @click="seeClothes($event)" :class="nav.className"> {{nav.title}} </li> </ul> </header> </template> <script> export default { data(){ return{ navs:[ { title:"Home", path:'/home/second', typeId:'1', className:'currLi' }, { title:"男装", path:'/home/second', typeId:'2' }, { title:"女装", path:'/home/second', typeId:'3' }, { title:"童装", path:'/home/second', typeId:'4' } ] } },methods:{ seeClothes(event){ var el=event.currentTarget; var type=el.getAttribute("id"); var a = []; var p = el.parentNode.children; for(var i =0,pl= p.length;i<pl;i++) { p[i].classList.remove("currLi"); } event.currentTarget.classList.add("currLi"); this.$router.push({path:'/home/clothesType',query:{type:type}}) } } } </script>
这里用到的知识点
1:v-for循环实现导航的生成
2:在函数中如何得到当前点击元素的某个属性值
这里给每个li绑定了点击事件,该元素绑定的id值是我们所需要传给选项卡组件的,所以我们在绑定事件的时候需要在click函数中添加参数,注意看我这里绑定事件的时候是这样写的
<li v-for="nav in navs" :id="nav.typeId" @click="seeClothes($event)" :class="nav.className"> {{nav.title}} </li>
点击事件是这样写的
seeClothes(event){ var el=event.currentTarget;//这样是获取当前点击的元素 var type=el.getAttribute("id");//这样就可以获取当前元素的id属性值 var a = [];//声明一个空数组,用来存放当前点击元素的所有的兄弟元素,用来实现只给当前点击的元素动态加背景色 var p = el.parentNode.children; for(var i =0,pl= p.length;i<pl;i++) { p[i].classList.remove("currLi"); } event.currentTarget.classList.add("currLi");//for循环是实现给当前元素的兄弟元素去除currLi类,实现只有当前点击元素有背景色 this.$router.push({path:'/home/clothesType',query:{type:type}})//点击导航路由跳转,并且通过query对象将type参数传过去 }
现在参数传过去了,我们看下选项卡组件是怎么写的
<template> <div> <div class="typeBox"> <ul class="closeType"> <li v-for="item in data" style="margin-bottom: 24px;"> <div class="npBox"> <img :src="'../static/img/'+item.img" class="cDetail"> <div class="npInnerBox"> <p class="name" >{{item.name}}</p> <p class="price">{{item.price}}</p> <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number> <button class="addCart" @click="addCart($event)">加入购物车</button> <span v-bind:id="item.id" style="display: none;"></span> </div> </div> </li> </ul> </div> </div> </template> <script> export default { data(){ return{ type:'', data:'', num1: 1, userCart:[], currentPage4:'', pageSize:'', total:'' } }, methods:{ changeData(){ this.type=this.$route.query.type; if(this.type=="2"){ this.data=[ { img:'m1.jpg', name:'黑白条纹裙', id:'M1', price:'100', }, { img:'m2.jpg', name:'水蓝色斑点无袖连衣裙', id:'M2', price:'199', }, { img:'m3.jpg', name:'短袖职业套装', id:'M3', price:'135', }, { img:'m4.jpg', name:'黑色职业套装', id:'M4', price:'288', }, { img:'m5.jpg', name:'格子衬衫', id:'M5', price:'155', }, { img:'m6.jpg', name:'女性性感短裙', id:'M6', price:'300', } ]; }else if(this.type=="3"){ this.data=[ { img:'clothes1.jpg', name:'黑白条纹裙', id:'W1', price:'100', }, { img:'clothes2.jpg', name:'水蓝色斑点无袖连衣裙', id:'W2', price:'199', }, { img:'clothes3.jpg', name:'短袖职业套装', id:'W3', price:'135', }, { img:'clothes4.jpg', name:'黑色职业套装', id:'W4', price:'288', }, { img:'clothes5.jpg', name:'格子衬衫', id:'W5', price:'155', }, { img:'clothes6.jpg', name:'女性性感短裙', id:'W6', price:'300', } ]; }else if(this.type=="性感职业装"){ this.data=[ { img:'clothes1.jpg', name:'黑白条纹裙', id:'W1', price:'100', }, { img:'clothes2.jpg', name:'水蓝色斑点无袖连衣裙', id:'W2', price:'199', }, { img:'clothes3.jpg', name:'短袖职业套装', id:'W3', price:'135', }, { img:'clothes4.jpg', name:'黑色职业套装', id:'W4', price:'288', }, { img:'clothes5.jpg', name:'格子衬衫', id:'W5', price:'155', }, { img:'clothes6.jpg', name:'女性性感短裙', id:'W6', price:'300', } ]; }else if(this.type==1){ this.data=[ { img:'m3.jpg', name:'黑白条纹裙', id:'M1', price:'100', }, { img:'m4.jpg', name:'黑色职业套装', id:'M4', price:'288', }, { img:'m5.jpg', name:'格子衬衫', id:'M5', price:'155', }, { img:'clothes4.jpg', name:'黑色职业套装', id:'W4', price:'288', }, { img:'clothes5.jpg', name:'格子衬衫', id:'W5', price:'155', }, { img:'clothes6.jpg', name:'女性性感短裙', id:'W6', price:'300', } ]; } } }, created(){ this.changeData() }, watch:{ "$route": "changeData" } } </script>
当时就是这里,给我带来了一些困扰,一开始我是把获取数据的changeData方法写在了mounted钩子函数中,但是这样的后果是只有在首次路由跳转的时候才会起作用,再次点击导航的时候数据不会改变
why?因为mounted是创建组件页面元素挂载以后会走里面的方法~想一下,你再次点击的时候只会路由跳转,并不会重新创建组件,所以~
我在想怎么能每次点击导航路由跳转以后都重新走一次获取数据的changeData方法,我想了想,因为导航点击每次都会进行路由跳转,所以~我可以在watch里监听路由跳转,这样每次点击导航的时候都会触发监听方法,从而会调用changeData方法~~解决了不是~~上面的代码有具体的写法
最后说下如何监听路由
watch:{ "$route": "changeData" }
下篇文章说下watch的具体用法
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。