场景题：VUE项目-点击不同的tab,切换不同的相关内容

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

免费下载资源

yuran1

1433人浏览 · 2023-06-28 11:14:27

yuran1 · 2023-06-28 11:14:27 发布

效果动态图如下：

实现思路：

在实现之前，我也搜了相关的文章看了看，大家实现的方式有很多，所以这个场景的解决方案非常灵活。但是一些博文并没有考虑到后期拓展的简易性问题。后期如果想增加一个新的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>

GitHub 加速计划 / vu / vue

105

下载

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

最近提交(Master分支：1 个月前 )

9e887079 [skip ci] 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> 1 年前

GitCode 开源社区

新一代开源开发者平台 GitCode，通过集成代码托管服务、代码仓库以及可信赖的开源组件库，让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

混元世界模型 1.1 在 GitCode 开源！秒级生成 3D 世界，开发者速来体验！

GitCode 开源社区

华为盘古 Ultra-MoE-718B-V1.1 正式开放下载！

👉Int8量化版本也同步开源：https://gitcode.com/ascend-tribe/openPangu-Ultra-MoE-718B-V1.1-Int8还记得9月底刷屏的「华为盘古718B」吗？当时凭借的训练哲学，在 SuperCLUE 榜单中一举冲至开源模型第三，成为业界焦点。openPangu-Ultra-MoE-718B-V1.1 是基于昇腾 NPU 训练的大规模混合专家（Mo