tab栏切换（vue）

最新推荐文章于 2024-03-29 19:25:44 发布

米咪米

最新推荐文章于 2024-03-29 19:25:44 发布

阅读量191

点赞数

分类专栏： Vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_52063946/article/details/118901298

版权

Vue.js 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

一、核心思路：

1、html结构：

<div id="app">
        <ul>
            <li></li>
        </ul>
        <div >
            <img src="" alt="">
        </div>
</div>

2、设置css样式：

（1）、将 li横向显示，设置图片为不可见 display:none

（2）、提前设置一个avtive样式（当点击某个小 li 时的样式）

（3）、提前设置一个current样式（需要显示图片，设置为 display:block）

3、js部分：

（1）、首先定义一个list数组，里面存放三个对象，属性分别为id，title，path

（2）、循环 list 数组，将 item.title 渲染在页面上，如果当前索引是这个小 li 的索引，那么就是 active的样式

（3）、循环 list 数组，将 item.path 渲染在页面上，如果当前索引是这个小 li 的索引，那么就是 current的样式

（4）、给 li 添加一个点击事件，当点击某个 li时，使当前的索引设置为这个小 li 的索引

二、实现代码

<!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 type="text/css">
        ul {
            position: relative;
        }
        
        ul li {
            list-style-type: none;
            float: left;
            border: 1px solid pink;
            width: 100px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        
        ul li.active {
            background-color: orange;
        }
        
        img {
            position: absolute;
            top: 68px;
            left: 48px;
        }
        
        #app div {
            display: none;
        }
        
        #app div.current {
            display: block;
        }
    </style>
</head>


<body>
    <div id="app">
        <ul>
            <li @click='change(index)' :class="currentIndex==index? 'active':''" v-for='(item,index) in list' :key='item.id'>{{item.title}}</li>
        </ul>
        <div v-for='(item,index) in list' :key='item.id' :class="currentIndex==index? 'current':''">
            <img :src='item.path' alt="">
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                currentIndex: 0, //当前索引
                list: [{
                    id: 1,
                    title: 'apple',
                    path: './img/apple.png'
                }, {
                    id: 2,
                    title: 'lemon',
                    path: './img/lemon.png'
                }, {
                    id: 3,
                    title: 'orange',
                    path: './img/orange.png'
                }]
            },
            methods: {
                change: function(index) {
                    this.currentIndex = index;

                }
            }

        })
    </script>
</body>

</html>

三、实现效果

点击lemon：

米咪米

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
tab栏切换（vue）

一、核心思路：1、html结构：<div id="app"> <ul> <li></li> </ul> <div > <img src="" alt=""> </div></div>2、设置css样式：（1）、将 li横向显示，设置图片为不可见 display:none
复制链接

扫一扫