基于Vue语法实现Tab选项卡

目录

需求：

步骤：

        1、安装相关配置文件

                1.1、在实现该功能可选择先下载 bootstrap 框架

                1.2、在书写脚本前引入 Vue.js（路径要改为您下载 Vue.js的路径）

        2、在脚本中创建 Vue实例并在实例中声明挂载容器，传输数据并声明相关方法。

        3、项目基本排版布局

                3.1 HTML布局

                3.2 CSS样式布局

        4.细节修改

        解决方案：

实现效果：​编辑

---

需求：

        点击左侧选项卡，在右侧显示对应的内容。

步骤：

        1、安装相关配置文件

                1.1、在实现该功能可选择先下载 bootstrap 框架

                参考地址：https://v4.bootcss.com/

                在项目中引入 bootstrap 中的 css 样式（路径要改为您下载 bootstrap 的路径）

<link rel="stylesheet" href="../libs/bootstrap/css/bootstrap.min.css">

                1.2、在书写脚本前引入 Vue.js（路径要改为您下载 Vue.js的路径）

                参考地址：https://cn.vuejs.org/

<script src="../libs/vue@2.7.16/vue.js"></script>

        2、在脚本中创建 Vue实例并在实例中声明挂载容器，传输数据并声明相关方法。

new Vue({
            //挂载容器
            el: "#app",
            // 数据
            data: {
                arr: [
                    { text: '内容一', id: 1 },
                    { text: '内容二', id: 2 },
                    { text: '内容三', id: 3 },
                    { text: '内容四', id: 4 },
                ],
                // 高亮的样式
                num: 0,
            },
            // 声明相关方法
            methods: {
                tabActive(i) {
                    this.num = i;
                },
            },
        });

        3、项目基本排版布局

                3.1 HTML布局

<!-- v-cloak是为了防止页面刷新出现抖动现象，作用是防抖 -->
    <div id="app" v-cloak>
        <div class="container mt-3">
            <!-- 此处采用 bootstrap 中的栅格系统 -->
            <div class="row">
                <div class="col-md-6">
                    <ul class="list-group list-group-flush pt-5">
                        <!-- v-for相当于 JS 中的循环遍历数组，其中 item 表示数组的每一项对象（可自定义名称），index表示下标（可自定义名称） -->
                        <!-- :key 是 v-bind:key 的简写，此处是为了避免数据重复渲染 -->
                        <!-- 该标签的类名采用三目运算符进行判断，其中 :class 表示动态绑定数据 -->
                        <!-- @click="事件名称" 表示点击则出发对应事件 -->
                        <!-- {{}} 是插值表达式的写法，可以直接引入 vue 实例中的属性 -->
                        <li v-for="(item,index) in arr" :key="item.id"
                            :class="['list-group-item',num === index ? 'bg-primary text-white' : '']"
                            @click="tabActive(index)">{{item.text}}</li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <div class="card" style="border: 0;">
                        <div class="card-body">
                            <span style="font-size: 40px;" class="text-danger">{{arr[num].text}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

                3.2 CSS样式布局

<style>
        [v-cloak] {
            display: 'none';
        }

        .row>div {
            height: 666px;
            border: 1px solid #ccc;
        }
    </style>

        4.细节修改

                一般第一次启动 Vue项目会在控制台显示日志信息

        

        解决方案：

                若不想看到这些日志信息，可在脚本中创建 Vue实例前输入该语句

        //禁止控制台输出日志信息
        Vue.config.productionTip = false;

实现效果：