vue2.0實(shí)現(xiàn)選項(xiàng)卡導(dǎo)航效果
本文實(shí)例為大家分享了vue2.0實(shí)現(xiàn)選項(xiàng)卡導(dǎo)航效果的具體代碼,供大家參考,具體內(nèi)容如下
1:背景是一個(gè)web端的電商網(wǎng)站,根據(jù)點(diǎn)擊的導(dǎo)航選項(xiàng)卡呈現(xiàn)不同得種類商品,首先這里說下我的路由結(jié)構(gòu)是導(dǎo)航是一個(gè)組件,選項(xiàng)卡的內(nèi)容又是單獨(dú)的一個(gè)組件。
這是導(dǎo)航組件的內(nèi)容,這里主要通過v-for循環(huán)生成導(dǎo)航,沒什么好說的,需要注意的是,這因?yàn)檫x項(xiàng)卡需要知道用戶所點(diǎn)擊的是哪個(gè)模塊,所以在數(shù)據(jù)中有個(gè)typeId屬性,這里需要把該屬性值傳給選項(xiàng)卡組件。
<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>
這里用到的知識(shí)點(diǎn)
1:v-for循環(huán)實(shí)現(xiàn)導(dǎo)航的生成
2:在函數(shù)中如何得到當(dāng)前點(diǎn)擊元素的某個(gè)屬性值
這里給每個(gè)li綁定了點(diǎn)擊事件,該元素綁定的id值是我們所需要傳給選項(xiàng)卡組件的,所以我們?cè)诮壎ㄊ录臅r(shí)候需要在click函數(shù)中添加參數(shù),注意看我這里綁定事件的時(shí)候是這樣寫的
<li v-for="nav in navs" :id="nav.typeId" @click="seeClothes($event)" :class="nav.className"> ??? ??? ??? ?{{nav.title}} ??? ??? ?</li>
點(diǎn)擊事件是這樣寫的
seeClothes(event){ ? ?? ??? ?var el=event.currentTarget;//這樣是獲取當(dāng)前點(diǎn)擊的元素 ? ?? ??? ?var type=el.getAttribute("id");//這樣就可以獲取當(dāng)前元素的id屬性值 ?? ??? ??? ?var a = [];//聲明一個(gè)空數(shù)組,用來存放當(dāng)前點(diǎn)擊元素的所有的兄弟元素,用來實(shí)現(xiàn)只給當(dāng)前點(diǎn)擊的元素動(dòng)態(tài)加背景色 ?? ??? ??? ?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循環(huán)是實(shí)現(xiàn)給當(dāng)前元素的兄弟元素去除currLi類,實(shí)現(xiàn)只有當(dāng)前點(diǎn)擊元素有背景色 ? ?? ??? ?this.$router.push({path:'/home/clothesType',query:{type:type}})//點(diǎn)擊導(dǎo)航路由跳轉(zhuǎn),并且通過query對(duì)象將type參數(shù)傳過去 ? ?? ?}
現(xiàn)在參數(shù)傳過去了,我們看下選項(xiàng)卡組件是怎么寫的
<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:'水藍(lán)色斑點(diǎn)無袖連衣裙', ?? ? ??? ??? ??? ??? ?id:'M2', ?? ? ??? ??? ??? ?price:'199', ?? ? ??? ??? ?}, ?? ? ??? ??? ?{ ?? ? ??? ??? ??? ?img:'m3.jpg', ?? ? ??? ??? ??? ?name:'短袖職業(yè)套裝', ?? ? ??? ??? ??? ??? ?id:'M3', ?? ? ??? ??? ??? ?price:'135', ?? ? ??? ??? ?}, ?? ? ??? ??? ?{ ?? ? ??? ??? ??? ?img:'m4.jpg',?? ? ?? ? ??? ??? ??? ?name:'黑色職業(yè)套裝', ?? ? ??? ??? ??? ??? ?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:'水藍(lán)色斑點(diǎn)無袖連衣裙', ?? ? ??? ??? ??? ??? ?id:'W2', ?? ? ??? ??? ??? ?price:'199', ?? ? ??? ??? ?}, ?? ? ??? ??? ?{ ?? ? ??? ??? ??? ?img:'clothes3.jpg', ?? ? ??? ??? ??? ?name:'短袖職業(yè)套裝', ?? ? ??? ??? ??? ??? ?id:'W3', ?? ? ??? ??? ??? ?price:'135', ?? ? ??? ??? ?}, ?? ? ??? ??? ?{ ?? ? ??? ??? ??? ?img:'clothes4.jpg',?? ? ?? ? ??? ??? ??? ?name:'黑色職業(yè)套裝', ?? ? ??? ??? ??? ??? ?id:'W4', ?? ? ??? ??? ??? ?price:'288', ?? ? ??? ??? ?}, ?? ? ??? ??? ?{ ?? ? ??? ??? ??? ?img:'clothes5.jpg', ?? ? ??? ??? ??? ?name:'格子襯衫', ?? ? ??? ??? ??? ??? ?id:'W5', ?? ? ??? ??? ??? ?price:'155', ?? ? ??? ??? ?}, ?? ? ??? ??? ?{ ?? ? ??? ??? ??? ?img:'clothes6.jpg', ?? ? ??? ??? ??? ?name:'女性性感短裙', ?? ? ??? ??? ??? ??? ?id:'W6', ?? ? ??? ??? ??? ?price:'300', ?? ? ??? ??? ?} ?? ? ??? ??? ?]; ?? ? ??? ?}else if(this.type=="性感職業(yè)裝"){ ?? ? ??? ??? ??? ?this.data=[ ?? ? ??? ??? ?{ ?? ? ??? ??? ??? ?img:'clothes1.jpg', ?? ? ??? ??? ??? ?name:'黑白條紋裙', ?? ? ??? ??? ??? ?id:'W1', ?? ? ??? ??? ??? ?price:'100', ?? ? ??? ??? ?}, ?? ? ??? ??? ?{ ?? ? ??? ??? ??? ?img:'clothes2.jpg', ?? ? ??? ??? ??? ?name:'水藍(lán)色斑點(diǎn)無袖連衣裙', ?? ? ??? ??? ??? ??? ?id:'W2', ?? ? ??? ??? ??? ?price:'199', ?? ? ??? ??? ?}, ?? ? ??? ??? ?{ ?? ? ??? ??? ??? ?img:'clothes3.jpg', ?? ? ??? ??? ??? ?name:'短袖職業(yè)套裝', ?? ? ??? ??? ??? ??? ?id:'W3', ?? ? ??? ??? ??? ?price:'135', ?? ? ??? ??? ?}, ?? ? ??? ??? ?{ ?? ? ??? ??? ??? ?img:'clothes4.jpg',?? ? ?? ? ??? ??? ??? ?name:'黑色職業(yè)套裝', ?? ? ??? ??? ??? ??? ?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:'黑色職業(yè)套裝', ?? ? ??? ??? ??? ??? ?id:'M4', ?? ? ??? ??? ??? ?price:'288', ?? ? ??? ??? ?}, ?? ? ??? ??? ?{ ?? ? ??? ??? ??? ?img:'m5.jpg', ?? ? ??? ??? ??? ?name:'格子襯衫', ?? ? ??? ??? ??? ??? ?id:'M5', ?? ? ??? ??? ??? ?price:'155', ?? ? ??? ??? ?}, ?? ? ??? ??? ?{ ?? ? ??? ??? ??? ?img:'clothes4.jpg',?? ? ?? ? ??? ??? ??? ?name:'黑色職業(yè)套裝', ?? ? ??? ??? ??? ??? ?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>
當(dāng)時(shí)就是這里,給我?guī)砹艘恍├_,一開始我是把獲取數(shù)據(jù)的changeData方法寫在了mounted鉤子函數(shù)中,但是這樣的后果是只有在首次路由跳轉(zhuǎn)的時(shí)候才會(huì)起作用,再次點(diǎn)擊導(dǎo)航的時(shí)候數(shù)據(jù)不會(huì)改變
why?因?yàn)閙ounted是創(chuàng)建組件頁面元素掛載以后會(huì)走里面的方法~想一下,你再次點(diǎn)擊的時(shí)候只會(huì)路由跳轉(zhuǎn),并不會(huì)重新創(chuàng)建組件,所以~
我在想怎么能每次點(diǎn)擊導(dǎo)航路由跳轉(zhuǎn)以后都重新走一次獲取數(shù)據(jù)的changeData方法,我想了想,因?yàn)閷?dǎo)航點(diǎn)擊每次都會(huì)進(jìn)行路由跳轉(zhuǎn),所以~我可以在watch里監(jiān)聽路由跳轉(zhuǎn),這樣每次點(diǎn)擊導(dǎo)航的時(shí)候都會(huì)觸發(fā)監(jiān)聽方法,從而會(huì)調(diào)用changeData方法~~解決了不是~~上面的代碼有具體的寫法
最后說下如何監(jiān)聽路由
watch:{ ? "$route": "changeData" }
下篇文章說下watch的具體用法
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue router導(dǎo)航守衛(wèi)(router.beforeEach())的使用詳解
- vue實(shí)現(xiàn)導(dǎo)航欄效果(選中狀態(tài)刷新不消失)
- vue 和vue-touch 實(shí)現(xiàn)移動(dòng)端左右導(dǎo)航效果(仿京東移動(dòng)站導(dǎo)航)
- vue實(shí)現(xiàn)nav導(dǎo)航欄的方法
- vue使用ElementUI時(shí)導(dǎo)航欄默認(rèn)展開功能的實(shí)現(xiàn)
- vue實(shí)現(xiàn)側(cè)邊欄導(dǎo)航效果
- Vue實(shí)現(xiàn)導(dǎo)航欄菜單
- vue2.0實(shí)現(xiàn)導(dǎo)航菜單切換效果
- vue+elementUI動(dòng)態(tài)生成面包屑導(dǎo)航教程
- 詳解Vue的鉤子函數(shù)(路由導(dǎo)航守衛(wèi)、keep-alive、生命周期鉤子)
相關(guān)文章
nuxt實(shí)現(xiàn)封裝axios并且獲取token
這篇文章主要介紹了nuxt實(shí)現(xiàn)封裝axios并且獲取token,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue通過watch對(duì)input做字?jǐn)?shù)限定的方法
本篇文章主要介紹了vue通過watch對(duì)input做字?jǐn)?shù)限定的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07vue el-table實(shí)現(xiàn)行內(nèi)編輯功能
這篇文章主要為大家詳細(xì)介紹了vue el-table實(shí)現(xiàn)行內(nèi)編輯功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12在vue react中如何使用Web Components組件
這篇文章主要介紹了在vue react中如何使用Web Components組件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05如何利用Vue3+Element?Plus實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽頁及右鍵菜單
標(biāo)簽頁一般配合菜單實(shí)現(xiàn),當(dāng)你點(diǎn)擊一級(jí)菜單或者二級(jí)菜單時(shí),可以增加對(duì)應(yīng)的標(biāo)簽頁,當(dāng)你點(diǎn)擊對(duì)應(yīng)的標(biāo)簽頁,可以觸發(fā)對(duì)應(yīng)的一級(jí)菜單或者二級(jí)菜單,下面這篇文章主要給大家介紹了關(guān)于如何利用Vue3+Element?Plus實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽頁及右鍵菜單的相關(guān)資料,需要的朋友可以參考下2022-11-11Vue導(dǎo)出json數(shù)據(jù)到Excel電子表格的示例
本篇主要介紹了Vue導(dǎo)出json數(shù)據(jù)到Excel電子表格的示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12