vue实现tab选项卡切换效果

Posted 2020-11-23 maxiaocang

tab选项卡切换效果：

通过点击事件传入参数，然后通过v-show来进行切换显示

<template>
<div class="box">
    <div class="tab">
        <span @click="cur = 0">首页</span>
        <span @click="cur = 1">广场</span>
        <span @click="cur = 2">我的</span>
    </div>
    <div class="content">
        <div v-show="cur == 0">
            首页首页首页首页首页首页首页首页首页首页
        </div>
        <div v-show="cur == 1">
            广场广场广场广场广场广场广场广场广场广场广场
        </div>
        <div v-show="cur == 2">
            我的我的我的我的我的我的我的我的我的我的
        </div>
    </div>
</div>
</template>
<script>
export default {
    data(){
        return {
            cur:0
        }
    }
}
</script>

当我们选项卡增多的时候，代码量也会增大，所以我们可以使用v-for来优化一下代码：

<template>
<div class="box">
    <div class="tab">
        <span v-for="(item,index) of tab" :key="index" @click="cur = index">{{item}}</span>
    </div>
    <div class="content">
        <div v-for="(item,index) of content" :key="index" v-show="cur == index">{{item}}</div>
    </div>
</div>
</template>
<script>
export default {
    data(){
        return {
            tab:["首页","广场","我的"],
            content:[
                "首页首页首页首页首页首页首页首页首页首页",
                "广场广场广场广场广场广场广场广场广场广场广场",
                "我的我的我的我的我的我的我的我的我的我的"
                ],
            cur:0
        }
    }
}
</script>