Vue中tab栏切换的简单实现

Wanda ·

更新时间:2024-11-13

· 779 次阅读

一、效果展示

二、实现原理

三、css和h5的代码，获得最基本的样式

1.css

2.H5 这是没有在使用Vue书写前的样式

四、Vue部分

一、效果展示

二、实现原理

主体通过绑定事件，索引的利用，v-for的数组遍历，来实现的切换效果。

具体细节看代码段的解释，根据个人所需去了解一下，更多的是入门理解其中的细思。

三、css和h5的代码，获得最基本的样式 1.css

主体的布局根据个人的喜好，这里我只进行了简单的布局。

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

主要让展现的效果好看一些。具体样式还是根据个人。

<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书写前的样式

其中的“内容，动态，行业”被上文的display none 隐藏起来了，并不是没有内容

<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部分

填充的内容以数组的形势来给到想要给的地方，可以给每一个内容都取一个固定的id，在后续可以提高性能，currentIndex:0,是定义的一个索引，通过这个索引来绑定类名，methods定义函数，也就是方法，后续在其中来实现切换。

<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;//通过参数获得索引
         }
        }
    })
</script>

此段是使用Vue后的h5代码

其中使用了点击的事件绑定

v-for的数组遍历（item，index）in list .list是自己定义的数组名

在插值表达式中获取所对应的值

通过 :class来绑定类名，是通过定义的索引来判断，如果两个索引相同，就会获得背景颜色，也会出现相对应的值，否则就。

<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>

到此这篇关于Vue中tab栏切换的简单实现的文章就介绍到这了,更多相关Vue tab栏切换内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

VUE tab

1024 个赞