Vue实现简易tab切换效果

最新推荐文章于 2024-07-17 11:58:23 发布

柚子、、

最新推荐文章于 2024-07-17 11:58:23 发布

阅读量210

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/ZZHK666/article/details/118967228

版权

本文介绍如何使用Vue.js框架动态实现Tab切换效果，通过组件化和响应式数据绑定，创建交互式的用户体验。内容包括Vue实例的创建、数据绑定、事件监听以及条件渲染等核心概念。

摘要由CSDN通过智能技术生成

        ul li {

            margin: 0;
            padding: 0;
            list-style: none;
        }
        #app {
            width: 600px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
        .tab-tilte{
            width: 90%;
        }
        .tab-tilte li{
            float: left;
            width: 25%;
            padding: 10px 0;
            text-align: center;
            background-color:#f4f4f4;
            cursor: pointer;
        }
     /* 点击对应的标题添加对应的背景颜色 */
        .tab-tilte .active{
            background-color: #09f;
            color: #fff;
        }
        .tab-content div{
            float: left;
            width: 25%;
            line-height: 100px;
            text-align: center;
        }

<body>
    <div id="app">
        <ul class="tab-tilte">
            <li @click="cur=0" :class="{active:

最低0.47元/天解锁文章

柚子、、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录