vue实现tab选项卡

文章目录

一、效果图展示

实现的效果图如下：

在这里插入图片描述

二、静态页面结构

css

<style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.tab {
    width: 600px;
    margin-left: 100px;
    margin-top: 100px;
}
.tab ul li{
    list-style: none;
    float: left;
    width: 200px;
    height: 100px;
    border: 1px solid black;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
}

.tab div img {
    width: 600px;
    float: left;
}
.tab div {
	display: none;
}

.tab ul li.active {
	background-color: chartreuse;
}
.tab div.current {
	display: block;
}

</style>

html

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

javascript

<script src="../script/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data: {
        },
        methods:{  
        }
    })
</script>

三、vue实现

1、将静态结构和样式重构为基于vue模板语法的形式

vue实现ul标签渲染

首先，我们处理ul，在data中定义一个数组变量，里边存放多个对象，每个对象存放一类

data:{
list:[{
    id: 1,//用来代表每一个对象
    title: '乖巧猫',//标题
    path: '../img/1.jpg'//图片路径
},
{
    id: 2,
    title: '调皮猫',
    path: '../img/2.jpg'
    },
{
    id: 1,
    title: '惊悚蛇',
    path: '../img/3.jpg'
}
]
}

我们在li标签中使用v-for循环来渲染，绑定key

<li :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>

这样我们的li标签就渲染到页面了

同理，图片也一样

<div :key='item.id' v-for='(item,index) in list'>
 	<img :src="item.path" >
</div>

2、处理事件绑定和js控制逻辑

vue实现点击切换

首先我们获取你当前的li标签，所以我们得定义一个变量currentIndex用来表示当前选项卡

data: {
	currentIndex:0, //表示当前选项卡
}

紧接着我们绑定class类名，给当前选项卡添加类

使用三目运算法符，如果当前选项卡等于当前选项卡索引那么就添加active类跟current类

<ul>
<li :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>
</ul>
<div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item,index) in list'>
<img :src="item.path" >
</div>

最后，实现点击切换功能，绑定点击事件change()，我们在vue方法中定义一个change()方法,用来实现切换逻辑

<li v-on:click='change' :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>

methods:{
change:function(){
    //用来实现切换功能
  
}
}

在change方法里面实现切换，实质上就是操作类名，通过currentIndex来操作

将index传到change方法中去：

<li v-on:click='change(index)'</li>

在function中接收，然后实现

methods:{
change:function(index){
        this.currentIndex = index
	}
}

四、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .tab {
            width: 600px;
            margin-left: 100px;
            margin-top: 100px;
        }
        .tab ul li{
            list-style: none;
            float: left;
            width: 200px;
            height: 100px;
            border: 1px solid black;
            text-align: center;
            line-height: 100px;
            cursor: pointer;
        }
        
        .tab div img {
            width: 600px;
            float: left;
        }
        .tab div {
            display: none;
        }

        .tab ul li.active {
            background-color: chartreuse;
        }
        .tab div.current {
            display: block;
        }

    </style>
</head>
<body>
    <div id="app">
        <div class="tab">
            <ul>
                <li v-on:click='change(index)' :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>
            </ul>
            <div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item,index) in list'>
                <img :src="item.path" >
            </div>
        </div>
    </div>
    <script src="../script/vue.min.js"></script>
    <script>

        var vm = new Vue({
            el:'#app',
            data: {
                currentIndex:0, //表示当前选项卡
                //定义一个数组变量，里边存放多个对象，每个对象存放一类
                list:[{
                    id: 1,//用来代表每一个对象
                    title: '乖巧猫',//标题
                    path: '../img/1.jpg'//图片路径
                },
                {
                    id: 2,
                    title: '调皮猫',
                    path: '../img/2.jpg'
                },
                {
                    id: 1,
                    title: '惊悚蛇',
                    path: '../img/3.jpg'
                }
            ]
            },
            methods:{
                change:function(index){
                    //用来实现切换功能
                    //实现选项卡 切换操作 - 本质就是操作类名
                    // 通过currentIndex操作
                    this.currentIndex = index
                }
            }
        })

    </script>
</body>
</html>
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign