vue.js 实现tab栏切换

看一下常见的tab栏切换的场景:根据上面的例子分析tab栏主要结构:首先有三个按钮，当前选中的按钮有样式。比如一个为选中的，那么第一个为高亮状态。三个按钮分别为图片，专栏，热点每当你点击的时候，下面的tab栏会有对应的内容切换。当你点击图片，图片的按钮有高亮的状态，下面的内容会显示图片的内容，当你点击专栏，专栏的按钮会有高亮的状态，下面会显示专栏的内容。当你点击热点，热点的按钮会...

webshitian

5255人浏览 · 2019-10-20 14:38:58

webshitian · 2019-10-20 14:38:58 发布

看一下常见的tab栏切换的场景:
在这里插入图片描述
根据上面的例子分析tab栏主要结构:

首先有三个按钮，当前选中的按钮有样式。比如一个为选中的，那么第一个为高亮状态。
三个按钮分别为图片，专栏，热点
每当你点击的时候，下面的tab栏会有对应的内容切换。
当你点击图片，图片的按钮有高亮的状态，下面的内容会显示图片的内容，
当你点击专栏，专栏的按钮会有高亮的状态，下面会显示专栏的内容。
当你点击热点，热点的按钮会有高亮的状态，下面的内容会显示热点的内容

上例子:

<template>
    <div class="container">
        <div class="btns">
            <span>图片</span>
            <span>专栏</span>
            <span>热点</span>
        </div>
        <br>
        <div>
            <p>图片</p>
            <p>图片</p>
            <p>图片</p>
            <p>图片</p>
        </div>

        <div>
            <p>专栏</p>
            <p>专栏</p>
            <p>专栏</p>
            <p>专栏</p>
        </div>

        <div>
            <p>热点</p>
            <p>热点</p>
            <p>热点</p>
            <p>热点</p>
        </div>
    </div>
    
</template>

<script>
export default {

}
</script>

<style scoped lang="less">

    .container{
        padding:30px;
        .btns{

            margin-bottom: 10px;

            span{
                cursor: pointer;
                border:1px #ddd solid;
                float: left;
            }
        
        }
    }
    
</style>

在这里插入图片描述

把专栏和热点部分的内容隐藏,给需要隐藏的部分添加v-if=”false”

<template>
    <div class="container">
        <div class="btns">
            <span>图片</span>
            <span>专栏</span>
            <span>热点</span>
        </div>
        <br>
        <div>
            <p>图片</p>
            <p>图片</p>
            <p>图片</p>
            <p>图片</p>
        </div>

        <div v-if="false">
            <p>专栏</p>
            <p>专栏</p>
            <p>专栏</p>
            <p>专栏</p>
        </div>

        <div v-if="false">
            <p>热点</p>
            <p>热点</p>
            <p>热点</p>
            <p>热点</p>
        </div>
    </div>
    
</template>

在这里插入图片描述
设置v-if=”false”虽然可以把专栏和热点的内容隐藏了，但是这样的方式是一直隐藏，无法更改。我们的tab栏切换的内容需要变化的，这样的方式不适合。

可以通过变量的方式来实现。

<script>
export default {
    data(){
        return{
            //tab栏的核心是当前下标的变量
            current:0
        }
    }
}
</script>

在这里设置下标为0，就因为tab的第一个按钮为0，第二个按钮为1，三个按钮为2.
点击图片的时候是0，点击专栏的时候是1，点击热点的时候是2.

在点击按钮，显示对应内容的进行判断上，比如第一个按钮。v-if=”current === 0”。

<template>
    <div class="container">
        <div class="btns">
            <span>图片</span>
            <span>专栏</span>
            <span>热点</span>
        </div>
        <br>
        <div v-if="current === 0">
            <p>图片</p>
            <p>图片</p>
            <p>图片</p>
            <p>图片</p>
        </div>

        <div v-if="current === 1">
            <p>专栏</p>
            <p>专栏</p>
            <p>专栏</p>
            <p>专栏</p>
        </div>

        <div v-if="current === 2">
            <p>热点</p>
            <p>热点</p>
            <p>热点</p>
            <p>热点</p>
        </div>
    </div>
    
</template>

当点击图片按钮的时候，下标是0，图片部分的内容显示，其他两部分的内容隐藏。
当点击专栏按钮的时候，下标为1，专栏部分的内容显示，其他两部分的内容隐藏。
当点击热点按钮的时候，下标为1，热点部分的内容显示，其他两部分的内容隐藏。

因此，我们要给点击按钮添加点击事件。

<div class="btns">       
      <span @click="handleClick">图片</span>
      <span @click="handleClick">专栏</span>
      <span @click="handleClick">热点</span>
</div>

上面是一种方式，在这里不需要每一个按钮都添加按钮，可以通过遍历的方式添加。

先用v-for进行遍历，而v-for需要接收数组才可以循环,这里没有数组。可以在v-for里面直接写数组

<span 
v-for="(item,index) in ['图片','专栏','热点']"
:key="index"
>
</span>

把遍历的按钮显示出来，效果和之前的是一样的

<span 
v-for="(item,index) in ['图片','专栏','热点']"
:key="index"
>
{{item}}
</span>

在这里插入图片描述
给遍历的按钮添加事件

<span 
v-for="(item,index) in ['图片','专栏','热点']"
:key="index"
@click="handleClick"
>
</span>

添加handleClick方法，在点击时候改变current，怎么得到current值???

methods:{
        //点击的时候改变current
        handleClick(){
            this.current = 
        }
    }

可以通过在span里把index值传过来，给handleClick使用

<span 
v-for="(item,index) in ['图片','专栏','热点']"
:key="index"
@click="handleClick(index)"
>
</span>

methods:{
        //点击的时候改变current
        handleClick(index){
            this.current = index;
        }
    }

代码：

<template>
    <div class="container">
        <div class="btns">
            <!--
                <span>图片</span>
                <span>专栏</span>
                <span>热点</span>
            -->
            <!--加上 :key="index" 主要是方便数组遍历比较-->
            <span v-for="(item,index) in ['图片','专栏','热点']"
            :key="index"
            @click="handleClick(index)"
            >{{item}}</span>
        </div>
        <br>
        <div v-if="current === 0">
            <p>图片</p>
            <p>图片</p>
            <p>图片</p>
            <p>图片</p>
        </div>

        <div v-if="current === 1">
            <p>专栏</p>
            <p>专栏</p>
            <p>专栏</p>
            <p>专栏</p>
        </div>

        <div v-if="current === 2">
            <p>热点</p>
            <p>热点</p>
            <p>热点</p>
            <p>热点</p>
        </div>
    </div>
    
</template>

<script>
export default {
    data(){
        return{
            //tab栏的核心是当前下标的变量
            current:0
        }
    },

    methods:{
        //点击的时候改变current
        handleClick(index){
            this.current = index;
        }
    }
}
</script>

<style scoped lang="less">

    .container{
        padding:30px;
        .btns{

            margin-bottom: 10px;

            span{
                cursor: pointer;
                border:1px #ddd solid;
                float: left;
            }

        
        }
    }
    
</style>

运行结果：
在这里插入图片描述
给当前的点击状态添加高亮状态
直接添加class="active"三个按钮都添加上样式，

<style scoped lang="less">

    .container{
        padding:30px;
        .btns{

            margin-bottom: 10px;

            span{
                cursor: pointer;
                border:1px #ddd solid;
                float: left;
            }

            .active{
                color:red;
                border-color: red;
            }
        
        }
    }
    
</style>

<span 
	v-for="(item,index) in ['图片','专栏','热点']"
    :key="index"
    @click="handleClick(index)"
    class="active">{{item}}</span>

在这里插入图片描述
这种方式不对。正确的方式是给当前点击的按钮加上，这个按钮应该加上是动态的class。
判断一个元素是否添加样式，需要通过对象的方式进行判断。对象前面的key是你要加样式的类名，
后面的类名为true时就加上样式，

:class="{
	active:true
}"

后面的类名为false时，就不加上样式

:class="{
	active:false
}"

要满足什么的条件才为true???
当active：index === current 时，active的值为true。

当v-for第一次循环的时候，index为0，而urrent的值0，因此active：0 === 0，active的值为true，图片的按钮成立，于是给图片加上active的样式，
当v-for第二次循环的时候，index为1，而 urrent的值0，因此active：1 === 0，active的值为false，专栏的按钮不成立，于是不给专栏加上active的样式
当v-for第三次循环的时候，index为2，而 urrent的值0，因此active：2 === 0，active的值为false，热点的按钮不成立，于是不给热点加上active的样式

上面的结果是当点击图片按钮的时候，图片加上样式，而专栏和热点不加上样式。

代码：

<template>
    <div class="container">
        <div class="btns">
            <!--
                <span>图片</span>
                <span>专栏</span>
                <span>热点</span>
            -->
            <!--加上 :key="index" 主要是方便数组遍历比较-->
            <span v-for="(item,index) in ['图片','专栏','热点']"
            :key="index"
            @click="handleClick(index)"
            :class="{active:index === current}">{{item}}</span>
        </div>
        <br>
        <div v-if="current === 0">
            <p>图片</p>
            <p>图片</p>
            <p>图片</p>
            <p>图片</p>
        </div>

        <div v-if="current === 1">
            <p>专栏</p>
            <p>专栏</p>
            <p>专栏</p>
            <p>专栏</p>
        </div>

        <div v-if="current === 2">
            <p>热点</p>
            <p>热点</p>
            <p>热点</p>
            <p>热点</p>
        </div>
    </div>
    
</template>

<script>
export default {
    data(){
        return{
            //tab栏的核心是当前下标的变量
            current:0
        }
    },

    methods:{
        //点击的时候改变current
        handleClick(index){
            this.current = index;
        }
    }
}
</script>

<style scoped lang="less">

    .container{
        padding:30px;
        .btns{

            margin-bottom: 10px;

            span{
                cursor: pointer;
                border:1px #ddd solid;
                float: left;
            }

            .active{
                color:red;
                border-color: red;
            }
        
        }
    }
    
</style>

输出结果：

在这里插入图片描述
以上就是通过vue.js的方式实现tab栏的切换。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

webshitian

@qq_42943107

已为社区贡献2条内容