Vue实例仿淘宝Tab栏切换

最新推荐文章于 2023-03-14 16:53:25 发布

小雨滴ya

最新推荐文章于 2023-03-14 16:53:25 发布

阅读量1k

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44805285/article/details/105696287

版权

本文介绍了使用Vue创建仿淘宝Tab栏切换的效果，通过cruId控制内容显示。在开发过程中，作者发现并修复了将变量tit误写为hit的错误。此外，还分享了一个CSS小技巧：当使用display: inline-block存在间隙时，设置父元素font-size: 0可以消除这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="tab">
                <div class="tab-tit">
                    <a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">第一位女孩</a>
                    <a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">第二位女孩</a>
                    <a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">第三位女孩</a></