文章持续更新，阅读最新版文章请查看 https://www.itshutong.com/articles/429/vue-realizes-label-switching

效果如图所示：

image

点击不同的标签，标签下的内容也随之切换

思路分析

标签与内容是一一对应的，可以用数组对象存储这些数据

然后可以用一个变量存储当前索引值，如果当前索引值等同于标签/内容的索引值时，所在标签项设置为高亮，所在内容设置为可见

代码实现

前端样式使用 bootstrap css

html 结构

<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 数据

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
        }
    }
})