vue2.0實(shí)現(xiàn)選項(xiàng)卡導(dǎo)航效果

更新時間：2022年03月02日 17:19:49 作者：ygy211715

這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)現(xiàn)選項(xiàng)卡導(dǎo)航效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue2.0實(shí)現(xiàn)選項(xiàng)卡導(dǎo)航效果的具體代碼，供大家參考，具體內(nèi)容如下

1：背景是一個web端的電商網(wǎng)站，根據(jù)點(diǎn)擊的導(dǎo)航選項(xiàng)卡呈現(xiàn)不同得種類商品，首先這里說下我的路由結(jié)構(gòu)是導(dǎo)航是一個組件，選項(xiàng)卡的內(nèi)容又是單獨(dú)的一個組件。

這是導(dǎo)航組件的內(nèi)容，這里主要通過v-for循環(huán)生成導(dǎo)航，沒什么好說的，需要注意的是，這因?yàn)檫x項(xiàng)卡需要知道用戶所點(diǎn)擊的是哪個模塊，所以在數(shù)據(jù)中有個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>

這里用到的知識點(diǎn)

1：v-for循環(huán)實(shí)現(xiàn)導(dǎo)航的生成

2：在函數(shù)中如何得到當(dāng)前點(diǎn)擊元素的某個屬性值

這里給每個li綁定了點(diǎn)擊事件，該元素綁定的id值是我們所需要傳給選項(xiàng)卡組件的，所以我們在綁定事件的時候需要在click函數(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 = [];//聲明一個空數(shù)組，用來存放當(dāng)前點(diǎn)擊元素的所有的兄弟元素，用來實(shí)現(xiàn)只給當(dāng)前點(diǎn)擊的元素動態(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對象將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)時就是這里，給我?guī)砹艘恍├_，一開始我是把獲取數(shù)據(jù)的changeData方法寫在了mounted鉤子函數(shù)中，但是這樣的后果是只有在首次路由跳轉(zhuǎn)的時候才會起作用，再次點(diǎn)擊導(dǎo)航的時候數(shù)據(jù)不會改變

why？因?yàn)閙ounted是創(chuàng)建組件頁面元素掛載以后會走里面的方法~想一下，你再次點(diǎn)擊的時候只會路由跳轉(zhuǎn)，并不會重新創(chuàng)建組件，所以~

我在想怎么能每次點(diǎn)擊導(dǎo)航路由跳轉(zhuǎn)以后都重新走一次獲取數(shù)據(jù)的changeData方法，我想了想，因?yàn)閷?dǎo)航點(diǎn)擊每次都會進(jìn)行路由跳轉(zhuǎn)，所以~我可以在watch里監(jiān)聽路由跳轉(zhuǎn)，這樣每次點(diǎn)擊導(dǎo)航的時候都會觸發(fā)監(jiān)聽方法，從而會調(diào)用changeData方法~~解決了不是~~上面的代碼有具體的寫法

最后說下如何監(jiān)聽路由