记录下，用vue实现tab栏切换

最新推荐文章于 2023-08-07 00:00:00 发布

动物世界647

最新推荐文章于 2023-08-07 00:00:00 发布

阅读量157

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_63186246/article/details/128743399

版权

刚看完属性绑定、样式绑定、von、vmodel、vbind指令语法

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            display: flex;
        }
        ul li{
            height: 40px;
            width: 60px;
            border: 1px solid black;
        }
        .color{
            background-color: orange;
        }
        .nimg{
            display: none;
        }
        .current{
            display: block;
        }
        .img img{
            height: 300px;
            width: 500px;
        }
        
    </style>
</head>
<body>
    <div id="root">
        <ul>
            <li @click="change(index)" :class='CurrentIndex==index?"color":""' v-for="(item, index) in list" :key="item.id">{{item.title}}</li> 
        </ul>
        <div class="img">
            <div :class="CurrentIndex==index?'current':''" class="nimg" v-for="(item, index) in list" :key="item.id">
                <img v-bind:src="item.path" alt="">
            </div>
        </div>
    </div>

<script>
    const v1=new Vue({
        el:'#root',
        data:{
            CurrentIndex:0,
            list:[{
                id:1,
                title:'苹果',
                path:'https://imgo.114shouji.com/img2020/10/23/14/2020102367367881.jpg',

            },{
                id:2,
                title:'桔子',
                path:'https://img2.baidu.com/it/u=2715000378,3304513539&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=377',

            },{
                id:3,
                title:'香蕉',
                path:'https://media2.fishtank.my/media/syokchinese/assets/article/1_74.jpg',

            }]
        },
        methods: {
            change:function(index){
               this.CurrentIndex=index;
            },
        },
    })
</script>
</body>
</html>