初学vue第一天

最新推荐文章于 2024-02-29 10:06:46 发布

遂风流

最新推荐文章于 2024-02-29 10:06:46 发布

阅读量359

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_50634361/article/details/110878732

版权

vue版tab栏切换

第一步：将 list 中的数据title 渲染到左侧和右侧的tab栏中 (v-if=“index < list.length/2” 只显示一半)
- 注意：左右各渲染3条数据
- 第二步：将 list 中的数据title 和 content 渲染到内容区域
- 第三步：给左侧的tab栏中的li绑定事件实现动态切换active 类名
  - 注意：给点击的当前li 添加类名 active 即可让当前的li字体颜色改变 (类名是 active的样式已经在CSS中提前定义好 )
  - 其他 li 需要移除类名 active
  - 思考vue的实现方式比较currentIndex与index的值一样则该元素为被点击元素则给active样式
- 第四步：拿到当前点击li的索引让内容区域中对应索引类名是 tab-pane 的 div 显示
  - 注意：给类名是 tab-pane 的 div 添加类名 active 即可让当前div 显示出来 (类名是 active的样式已经在CSS中提前定义好 )
  - 其他 tab-pane 的 div 需要移除类名 active
- 第五步：给右侧的tab栏中的li绑定事件实现动态切换active 类名
  - 注意：给点击的当前li 添加类名 active 即可让当前的li字体颜色改变 (类名是 active的样式已经在CSS中提前定义好 )
- 第六步：拿到当前点击li的索引让内容区域中对应索引类名是 tab-pane 的 div 显示
  - 注意：这里需要注意索引问题：
    - 点击右侧第一个div 的时候需要让内容区域中的第 4个 div 显示出来
    - 点击右侧第2个div 的时候需要让内容区域中的第 5个 div 显示出来
    - 代码如下


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

        .vertical-tab {
            width: 920px;
            margin: 100px auto;
        }

        .vertical-tab .nav {
            list-style: none;
            width: 200px;
        }

        .vertical-tab .nav-tabs1 {
            border-right: 3px solid #e7e7e7;
        }

        .vertical-tab .nav-tabs2 {
            border-left: 3px solid #e7e7e7;
        }

        .vertical-tab .nav a {
            display: block;
            font-size: 18px;
            font-weight: 700;
            text-align: center;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: 10px 20px;
            margin: 0 0 1px 0;
            text-decoration: none;
        }

        .vertical-tab .tab-content {
            color: #555;
            background-color: #fff;
            font-size: 15px;
            letter-spacing: 1px;
            line-height: 23px;
            padding: 10px 15px 10px 25px;
            display: table-cell;
            position: relative;
        }

        .vertical-tab .nav-tabs1 {
            float: left;
        }

        .vertical-tab .tabs {
            width: 500px;
            box-sizing: border-box;
            float: left;
        }

        .vertical-tab .tab-content h3 {
            font-weight: 600;
            text-transform: uppercase;
            margin: 0 0 5px 0;
        }

        .vertical-tab .nav-tabs2 {
            float: right;
        }

        .tab-content .tab-pane {
            display: none;
        }

        .tab-content .tab-pane.active {
            display: block;
        }

        .nav li.active a {
            color: #198df8;
            background: #fff;
            border: none;
        }

        .fade {
            opacity: 0;
            transition: all .3s linear;
        }

        .fade.active {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div id="app" class="vertical-tab">
        <!-- 左侧tab栏 -->
        <ul class="nav nav-tabs1">
             <!-- v-for 循环遍历data下的list列表,把遍历的数据添加到左侧tab栏  v-if判断索引 v-bind绑定class属性-->
            <template v-for="(item,index) in list">
                <li @click="leftindex(index)" v-if="index < list.length/2" v-bind:class="{ active:index==active}"><a
                        href="#"> {{ item.title }} </a></li>

                <!-- <li @click="leftindex(index)" v-if="index < list.length/2" v-bind:class="{ active:index==active}"><a
                        href="#"> {{ item.content}} </a></li> -->
            </template>

        </ul>

        <!-- 内容区域 -->
        <!-- v-for循环遍历,根据index索引点击则展开display -->
        <div class="tab-content tabs">
            <div v-for="(item,index) in list" class="tab-pane  fade" v-bind:class="{ active:index==active}">
                <h3>{{item.title}}</h3>
                <p>{{item.content}}</p>
            </div>
        </div>
         <!-- v-for 循环遍历data下的list列表,把遍历的数据添加到右侧tab栏  v-if判断索引 v-bind绑定class属性-->
        <ul class="nav nav-tabs2">
            <template v-for="(item,index) in list">
                <li @click="rightindex(index)" v-if="index >= list.length/2" v-bind:class="{ active:index==active}"><a
                        href="#"> {{ item.title }} </a></li>

                <!-- <li @click="rightindex(index)" v-if="index >= list.length/2" v-bind:class="{ active:index==active}"><a
                    href="#"> {{ item.content}} </a></li> -->
            </template>
        </ul>
    </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                active: 0,
                list: [{
                    id: 1,
                    title: 'Section 1',
                    content: 'content1'
                }, {
                    id: 2,
                    title: 'Section 2',
                    content: 'content2'
                }, {
                    id: 3,
                    title: 'Section 3',
                    content: 'content3'
                }, {
                    id: 4,
                    title: 'Section 4',
                    content: 'content4'
                }, {
                    id: 5,
                    title: 'Section 5',
                    content: 'content5'
                }, {
                    id: 6,
                    title: 'Section 6',
                    content: 'content6'
                }]
            },
            methods: {
                // 左侧tab栏区域索引
                leftindex(index) {
                    this.active = index
                },
                // 右侧tab栏区域索引
                rightindex(index) {
                    this.active = index
                }
            }
        })
    </script>
</body>

</html>

遂风流

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学vue第一天

项目场景：使用 pip install 命令安装包爆出错误问题描述：提示：这里描述项目中遇到的问题：例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据APP 中接收数据代码：@Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToT
复制链接

扫一扫