溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下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" >
<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" ></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"
}以上是“vue2.0如何實現選項卡導航效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
