Vue实例之选项卡

最新推荐文章于 2023-04-25 17:43:49 发布

国服第一菜鸟

最新推荐文章于 2023-04-25 17:43:49 发布

阅读量557

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue入门项目

本文链接：https://blog.youkuaiyun.com/weixin_44039750/article/details/90089029

本文是Vue小实例的介绍，重点讲解如何使用Vue实现选项卡功能。通过Vue的数据双向绑定特性，结合@click事件和动态绑定class，实现了点击选项卡切换显示内容的效果。代码中，curId作为状态标志，根据其值决定显示哪个内容区域。

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

Vue小实例

1.选项卡

学了一小段时间Vue，看了就忘，大佬说一边build一边查漏补缺比较容易记住，所以在网上找了几个小实例做做，第一个选项卡最简单，但我觉得很好地反映了Vue数据双向绑定的特点，下面就来看看具体实现吧。

实现效果

结构分为两部分，一部分是上面的选项，另外一个就是下面那个文字会变的框框

div class="tab-tit">
        <a href="javascript:;"@click="curId=0" :class="{'cur':curId===0}">html</a>
        <a href="javascript:;"@click="curId=1" :class="{'cur':curId===1}">css</a>
        <a href="javascript:;"@click="curId=2" :class="{'cur':curId===2}">javascript</a>
        <a href="javascript:;"@click="curId=3" :class="{'cur':curId===3}">vue</a>
    </div>