vue.js 实现tab栏切换

看一下常见的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栏的切换。