使用vue2,实现简单的tab切换

最新推荐文章于 2024-03-02 23:16:06 发布

原创最新推荐文章于 2024-03-02 23:16:06 发布 · 658 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

该代码示例展示了如何使用Vue.js创建一个简单的导航菜单，菜单项由列表数据驱动，点击时会应用活动状态。菜单项的样式通过Vue的数据绑定和条件类进行动态切换。

部署运行你感兴趣的模型镜像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #app{
        display: flex;
        width: 300px;
        height: 60px;
        margin: 0 auto;
        padding: 0;
        list-style: none;
        border-bottom: 2px solid red;
    }
    li{
        text-align: center;
        color: #000;
        background-color: #eee;
    }
    a{
        text-decoration: none;
        color: #000;
        display: inline-block;
        width: 100px;
        height: 60px;
        line-height: 60px;
    }
    .active{
        background-color: red;
        color: #fff;
    }
</style>
<body>
    <ul id="app">
        <li v-for="(item,index) in list" :key="item.id" @click="activeIndex = index">
            <a :class="{active:index===activeIndex}" href="#">{{ item.name }}</a>
        </li>
         
    </ul>
    //引入vue.js
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                activeIndex: 0 ,
                list:[
                    {id:1,name:'京东秒杀'},
                    {id:2,name:'每日特价'},
                    {id:3,name:'品牌秒杀'}
                ]
            }
        })
    </script>
</body>
</html>

您可能感兴趣的与本文相关的镜像