文章持續(xù)更新临扮，閱讀最新版文章請查看 https://www.itshutong.com/articles/429/vue-realizes-label-switching

效果如圖所示：

image

點(diǎn)擊不同的標(biāo)簽谷羞，標(biāo)簽下的內(nèi)容也隨之切換

思路分析

標(biāo)簽與內(nèi)容是一一對應(yīng)的，可以用數(shù)組對象存儲這些數(shù)據(jù)

然后可以用一個變量存儲當(dāng)前索引值，如果當(dāng)前索引值等同于標(biāo)簽/內(nèi)容的索引值時，所在標(biāo)簽項(xiàng)設(shè)置為高亮，所在內(nèi)容設(shè)置為可見

代碼實(shí)現(xiàn)

前端樣式使用 bootstrap css

html 結(jié)構(gòu)

<div id="app" class="mt-5">
    <div class="tab">
        <ul class="d-flex p-0 justify-content-between">
            <li 
                class="btn border p-3 text-center" 
                :class="currentIndex==index ? 'btn-outline-danger' : ''" 
                :key="item.id" 
                v-for="(item, index) in list"
                @click="change(index)"
            >
                {{ item.title }}
            </li>
        </ul>
        <div 
            :class="currentIndex==index ? '' : 'd-none'" 
            :key="item.id" 
            v-for="(item, index) in list"
        >
            <img :src="item.avatar" alt="" class="mw-100">
        </div>
    </div>
</div>

js 數(shù)據(jù)

new Vue({
    el: '#app',
    data: {
        currentIndex: 0,
        list: [
            {
                id: 1,
                title: '黃蓉',
                avatar: 'https://image-1253761983.picgz.myqcloud.com/2020-02-10-121114.jpg'
            },
            {
                id: 2,
                title: '小龍女',
                avatar: 'https://image-1253761983.picgz.myqcloud.com/2020-02-10-121709.jpg',
            },
            {
                id: 3,
                title: '趙敏',
                avatar: 'https://image-1253761983.picgz.myqcloud.com/2020-02-10-121331.jpg',
            }
        ]
    },
    methods: {
        change: function(index) {
            this.currentIndex = index
        }
    }
})