vue實現tab選項卡切換效果

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>