Vue中tab欄切換的簡單實(shí)現(xiàn)

更新時間：2022年07月27日 09:27:00 作者：小余努力搬磚

本文主要介紹了Vue中tab欄切換的簡單實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、效果展示

二、實(shí)現(xiàn)原理

主體通過綁定事件，索引的利用，v-for的數(shù)組遍歷，來實(shí)現(xiàn)的切換效果。

具體細(xì)節(jié)看代碼段的解釋，根據(jù)個人所需去了解一下，更多的是入門理解其中的細(xì)思。

三、css和h5的代碼，獲得最基本的樣式

1.css

主體的布局根據(jù)個人的喜好，這里我只進(jìn)行了簡單的布局。

其中也用到了浮動，和清除浮動。

主要讓展現(xiàn)的效果好看一些。具體樣式還是根據(jù)個人。

<style>
        a{
            text-decoration: none;
            width: 180px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #666;
            float: left;
            margin-right: 15px;
        }
        .nav::after{
            content: '';
            display: block;
            clear: both;
        }
        .nav a{
            background-color: beige;
        }
        .nav a.hover{
            background-color: blue;
        }
        .nav_con div{
            display: none;
        }
        .nav_con .center{
            display: block;
        }
          img{
            width: 570px;
        }
</style>

2.H5 這是沒有在使用Vue書寫前的樣式

其中的“內(nèi)容，動態(tài)，行業(yè)”被上文的display none 隱藏起來了，并不是沒有內(nèi)容

<div class="tab">
        <div class="nav">
            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="hover">圖片一</a>
            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >圖片二</a>
            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >圖片三</a>
        </div>
        <div class="nav_con"> 
            <div><img src="./圖片/2.jpg" alt=""></div>
            <div><img src="./圖片/3.jpg" alt="">/div>
            <div><img src="./圖片/4.jpg" alt=""></div>
        </div>
</div>

四、Vue部分

填充的內(nèi)容以數(shù)組的形勢來給到想要給的地方，可以給每一個內(nèi)容都取一個固定的id，在后續(xù)可以提高性能，currentIndex:0,是定義的一個索引，通過這個索引來綁定類名，methods定義函數(shù)，也就是方法，后續(xù)在其中來實(shí)現(xiàn)切換。

<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el:'.tab',
        data:{
        currentIndex:0, //定義一個索引
        list:[{
            id: 1,
            title:'圖片一',
            path:'./圖片/2.jpg'
        },{
            id: 2,
            title:'圖片二',
            path:'./圖片/3.jpg'
        },{
            id: 3,
            title:'圖片三',
            path:'./圖片/4.jpg'
        }]},
        methods:{
         change(index){   
            vm.currentIndex = index;//通過參數(shù)獲得索引
         }
        }
    })
</script>

此段是使用Vue后的h5代碼

其中使用了點(diǎn)擊的事件綁定

v-for的數(shù)組遍歷（item，index）in list .list是自己定義的數(shù)組名

在插值表達(dá)式中獲取所對應(yīng)的值

通過 :class來綁定類名，是通過定義的索引來判斷，如果兩個索引相同，就會獲得背景顏色，也會出現(xiàn)相對應(yīng)的值，否則就。

<div class="tab">
<div class="nav">
    <a :class="currentIndex==index?'hover':''" href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"   v-on:click="change(index)"  :key="item.id" v-for="(item,index) in list">{{item.title}}</a>
</div>
<div class="nav_con"> 
    <div :class="currentIndex==index?'center':''" :key="item.id" v-for="(item,index) in list"><img :src="item.path" alt=""></div>
</div>
</div>

到此這篇關(guān)于Vue中tab欄切換的簡單實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue tab欄切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: