vue 实现标签切换
文章持续更新，阅读最新版文章请查看 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
}
}
})本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
对象存储
对象存储（Cloud Object Storage，COS）是由腾讯云推出的无目录层次结构、无数据格式限制，可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限，无需分区管理，适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。