当前位置 > it书童 > 大前端 > 正文

vue 实现标签切换

大前端 it书童 2020-02-10 21:19:35 0赞 0踩 65阅读 0评论
文末有完整源码下载

效果如图所示:

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

思路分析

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

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

代码实现

前端样式使用 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
        }
    }
})
转载须注明出处:https://www.itshutong.com/articles/429/vue-realizes-label-switching
标签: vue 案例
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录