欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue2.0實現(xiàn)選項卡導航效果

 更新時間：2022年03月02日 17:19:49   作者：ygy211715  
這篇文章主要為大家詳細介紹了vue2.0實現(xiàn)選項卡導航效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

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

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

這里給每個li綁定了點擊事件，該元素綁定的id值是我們所需要傳給選項卡組件的，所以我們在綁定事件的時候需要在click函數(shù)中添加參數(shù)，注意看我這里綁定事件的時候是這樣寫的

<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 = [];//聲明一個空數(shù)組，用來存放當前點擊元素的所有的兄弟元素，用來實現(xià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)是實現(xiàn)給當前元素的兄弟元素去除currLi類，實現(xiàn)只有當前點擊元素有背景色
? ?? ??? ?this.$router.push({path:'/home/clothesType',query:{type:type}})//點擊導航路由跳轉，并且通過query對象將type參數(shù)傳過去
? ?? ?}

現(xiàn)在參數(shù)傳過去了，我們看下選項卡組件是怎么寫的

<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:'短袖職業(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:'水藍色斑點無袖連衣裙',
?? ? ??? ??? ??? ??? ?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:'水藍色斑點無袖連衣裙',
?? ? ??? ??? ??? ??? ?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>

當時就是這里，給我?guī)砹艘恍├_，一開始我是把獲取數(shù)據(jù)的changeData方法寫在了mounted鉤子函數(shù)中，但是這樣的后果是只有在首次路由跳轉的時候才會起作用，再次點擊導航的時候數(shù)據(jù)不會改變

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

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

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

watch:{
? "$route": "changeData"
}

下篇文章說下watch的具體用法

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

  • nuxt實現(xiàn)封裝axios并且獲取token

    nuxt實現(xiàn)封裝axios并且獲取token

    這篇文章主要介紹了nuxt實現(xiàn)封裝axios并且獲取token,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue?iview封裝模態(tài)框的方法

    vue?iview封裝模態(tài)框的方法

    這篇文章主要為大家詳細介紹了vue?iview封裝模態(tài)框的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • vue通過watch對input做字數(shù)限定的方法

    vue通過watch對input做字數(shù)限定的方法

    本篇文章主要介紹了vue通過watch對input做字數(shù)限定的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-07-07
  • vue el-table實現(xiàn)行內編輯功能

    vue el-table實現(xiàn)行內編輯功能

    這篇文章主要為大家詳細介紹了vue el-table實現(xiàn)行內編輯功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-12-12
  • vue封裝axios與api接口管理的完整步驟

    vue封裝axios與api接口管理的完整步驟

    在實際的項目中,和后臺的數(shù)據(jù)交互是少不了的,我通常使用的是 axios 庫,所以下面這篇文章主要給大家介紹了關于vue封裝axios與api接口管理的相關資料,需要的朋友可以參考下
    2022-01-01
  • 在vue react中如何使用Web Components組件

    在vue react中如何使用Web Components組件

    這篇文章主要介紹了在vue react中如何使用Web Components組件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-05-05
  • 如何利用Vue3+Element?Plus實現(xiàn)動態(tài)標簽頁及右鍵菜單

    如何利用Vue3+Element?Plus實現(xiàn)動態(tài)標簽頁及右鍵菜單

    標簽頁一般配合菜單實現(xiàn),當你點擊一級菜單或者二級菜單時,可以增加對應的標簽頁,當你點擊對應的標簽頁,可以觸發(fā)對應的一級菜單或者二級菜單,下面這篇文章主要給大家介紹了關于如何利用Vue3+Element?Plus實現(xiàn)動態(tài)標簽頁及右鍵菜單的相關資料,需要的朋友可以參考下
    2022-11-11
  • Vue導出json數(shù)據(jù)到Excel電子表格的示例

    Vue導出json數(shù)據(jù)到Excel電子表格的示例

    本篇主要介紹了Vue導出json數(shù)據(jù)到Excel電子表格的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • 基于Vue實現(xiàn)拖拽效果

    基于Vue實現(xiàn)拖拽效果

    這篇文章主要介紹了基于Vue實現(xiàn)拖拽效果,文中給大家介紹了clientY pageY screenY layerY offsetY的區(qū)別講解，需要的朋友可以參考下
    2018-04-04
  • Vue 2.0 服務端渲染入門介紹

    Vue 2.0 服務端渲染入門介紹

    本篇文章主要介紹了Vue 2.0 服務端渲染入門，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-03-03

最新評論