Vue实现选项卡切换

我是段段

已于 2022-04-09 10:59:16 修改

阅读量6.3k

点赞数 9

分类专栏： Vue 文章标签： vue.js javascript 前端 html css

于 2022-01-19 17:37:43 首次发布

本文链接：https://blog.csdn.net/qq_43432158/article/details/122586287

版权

Vue 专栏收录该内容

8 篇文章 13 订阅

订阅专栏

📝 个人简介

⭐ 个人主页：我是段段🙋‍
🍊 博客领域：编程基础、前端💻
🍅 写作风格：干货！干货！都是干货！
🍑 精选专栏：Vue
🛸 支持段段：点赞👍、收藏⭐、留言💬

前言

用原生JS写过一个选项卡切换功能，但是相对比较复杂，然而用Vue实现就相对比较简单了

首先需要引入vue.js

<!-- 引入vue.js -->
<script src="./js/vue.js"></script>

页面元素的DOM结构也相对比较简单，因为使用了v-for进行循环，比原生JS编写时还要简洁，如下

 <div id="app">
     <!-- ul用来控制上部分切换模块 -->
     <ul>
         <li 
             v-for="(item, index) in dataList" 
             :key="item.id" 
             class="title" 
             :class="{ 'active': num == index }"
             @click="onGetIdx(index)"
             >{{ item.name }}
         </li>
     </ul>
     <!-- ol用来显示切换后对应的数据 -->
     <ol>
         <li 
             v-for="(item, idx) in contentList" 
             :key="item.id" 
             class="content" 
             :class="{ 'con-active': num == idx }"
             >{{ item.name }}
         </li>
     </ol>
</div>

然后写了点简单的css样式

* {
    margin: 0;
    padding: 0;
}

#app {
    width: 500px;
    height: 200px;
    margin: 40px auto;
    border: 1px solid #D0D0D0;
}

ul,
li {
    list-style: none;
}

ul {
    width: 500px;
    display: flex;
}

li.title {
    flex: 1;
    text-align: center;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #D0D0D0;
    border-right: 1px solid #D0D0D0;
    cursor: pointer;
}

ol{
    color: gray;
    font-size: 18px;
    height: 170px;
    line-height: 170px;
    text-align: center;
    cursor: default;
}

.active{
    color: #FFF;
    background: #5C7AE5;
}

.content{
    display: none;
}

.con-active{
    display: block;
}

渲染过程中使用到的数据如下

dataList: [
    { id: 1, name: '早饭' },
    { id: 2, name: '午饭' },
    { id: 3, name: '晚饭' }
],
contentList: [
    { id: 1, name: '豆浆、青椒鸡蛋、宫保鸡丁' },
    { id: 2, name: '米饭、麻辣羊肉、酸辣土豆丝' },
    { id: 3, name: '鱼香肉丝、孜然羊肉' }
],
num: 0 // 默认索引值为0 即“早饭”为默认选中的选项卡

完整的代码如下

<!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>vue选项卡</title>
    <!-- 引入vue.js -->
    <script src="./js/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 500px;
            height: 200px;
            margin: 40px auto;
            border: 1px solid #D0D0D0;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            width: 500px;
            display: flex;
        }

        li.title {
            flex: 1;
            text-align: center;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid #D0D0D0;
            border-right: 1px solid #D0D0D0;
            cursor: pointer;
        }

        ol{
            color: gray;
            font-size: 18px;
            height: 170px;
            line-height: 170px;
            text-align: center;
            cursor: default;
        }

        .active{
            color: #FFF;
            background: #5C7AE5;
        }
        
        .content{
            display: none;
        }
        
        .con-active{
            display: block;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- ul用来控制上部分切换模块 -->
        <ul>
            <li 
                v-for="(item, index) in dataList" 
                :key="item.id" 
                class="title" 
                :class="{ 'active': num == index }"
                @click="onGetIdx(index)"
                >{{ item.name }}
            </li>
        </ul>
        <!-- ol用来显示切换后对应的数据 -->
        <ol>
            <li 
                v-for="(item, idx) in contentList" 
                :key="item.id" 
                class="content" 
                :class="{ 'con-active': num == idx }"
                >{{ item.name }}
            </li>
        </ol>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                dataList: [
                    { id: 1, name: '早饭' },
                    { id: 2, name: '午饭' },
                    { id: 3, name: '晚饭' }
                ],
                contentList: [
                    { id: 1, name: '豆浆、青椒鸡蛋、宫保鸡丁' },
                    { id: 2, name: '米饭、麻辣羊肉、酸辣土豆丝' },
                    { id: 3, name: '鱼香肉丝、孜然羊肉' }
                ],
                num: 0 // 默认索引值为0 即“早饭”为默认选中的选项卡
            },
            methods: {
                // 用来切换点击的索引值
                onGetIdx(idx){
                    this.num = idx
                }
            }
        })
    </script>
</body>
</html>

至此就实现了Vue选项卡切换的功能，其实现效果如下
在这里插入图片描述
可以参考原生JS实现选项卡功能进行对比：原生JS实现选项卡

不懂的地方欢迎留言讨论~~

我是段段

关注

9
点赞
踩
52

收藏

觉得还不错? 一键收藏
打赏
3
评论
Vue实现选项卡切换

Vue实现选项卡切换前言用原生JS写过一个选项卡切换功能，但是相对比较复杂，然而用Vue实现就相对比较简单了首先需要引入vue.js<script src="./js/vue.js"></script>页面元素的DOM结构也相对比较简单，因为使用了v-for进行循环，比原生JS编写时还要简洁，如下 <div id="app">  &lt
复制链接

扫一扫