效果动态图如下：

 实现思路：

在实现之前，我也搜了相关的文章看了看，大家实现的方式有很多，所以这个场景的解决方案非常灵活。但是一些博文并没有考虑到后期拓展的简易性问题。后期如果想增加一个新的Tab，不得不去增加很多的代码量，乃至修改代码的逻辑。

本文的实现思路适合【具有多个Tab内容】的场景，当我们想要增加一些Tab键及相关内容时只需要增加一些div标签即可，并不需要改变JS代码。

而这种思路的缺点在于：手动操作了DOM，因为这种行为违反了MVVM的设计初衷，所以应该尽可能避免。此外，在实际的应用场景中并不会这么实施，因为通常我们是基于后端返回的数据来渲染页面的，而不是根据已经写死的数据。因而实现起来更加灵活，可以借助【v-for】、index等。

源代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- Tab -->
        <button id="Tab1" :class="{active: tab.Tab1}" @click="fun">Tab1</button>
        <button id="Tab2" :class="{active: tab.Tab2}" @click="fun">Tab2</button>
        <button id="Tab3" :class="{active: tab.Tab3}" @click="fun">Tab3</button>
        <button id="Tab4" :class="{active: tab.Tab4}" @click="fun">Tab4</button>
        <!-- Tab所对应的内容 -->
        <div class="d1">
            <div id="Tab1" v-show="tab.Tab1">这是Tab1的内容</div>
            <div id="Tab2" v-show="tab.Tab2">这是Tab2的内容</div>
            <div id="Tab3" v-show="tab.Tab3">这是Tab3的内容</div>
            <div id="Tab4" v-show="tab.Tab4">这是Tab4的内容</div>
        </div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                tab: {
                    Tab1: false,
                    Tab2: true,
                    Tab3: false,
                    Tab4: false,
                }
            },
            methods: {
                // Tab点击事件
                fun(event) {
                    // 获取所有的Tab按钮
                    let btn = document.getElementsByTagName('button')
                    // 利用【for of遍历】找到【class为active的Tab】
                    for (const iterator of btn) {
                        if (iterator.className == "active") {
                            // 利用【for in遍历】找到data中相关的数据，将其值改为false
                            // 这时data中所有Tab都为false，即都没有高亮效果
                            for (let index in this.tab) {
                                if (index == iterator.id) {
                                    this.tab[index] = false
                                }
                            }
                        }
                    }
                    // 根据事件的target属性，利用【for in遍历】找到data中相关的数据，将其值改为true
                    // 这时data中只有点击到的Tab为true, 也具备了高亮效果
                    for (let index in this.tab) {
                        if (index == event.target.id) {
                            this.tab[index] = true
                        }
                    }
                }
            },
        })
    </script>
</body>
<style>
    .d1 {
        width: 400px;
        height: 500px;
        background-color: rgb(37, 111, 176);
        margin-top: 10px;
    }

    .active {
        background-color: skyblue;
    }
</style>

</html>
# 前端 # javascript # vue.js
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：1 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区