vue-tab切换

最新推荐文章于 2023-03-01 10:58:09 发布

_小郑有点困了

最新推荐文章于 2023-03-01 10:58:09 发布

阅读量324

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_44706619/article/details/104630119

版权

vue 专栏收录该内容

81 篇文章 5 订阅

订阅专栏

vue-tab切换
不用js单纯利用vue属性进行tab切换，可以实现轮播图效果
效果图：
在这里插入图片描述
功能：
v-for生成tabbar和内容部分，利用点击时候传参与每个item的index进行三目运算匹配，
当index等于这个被记录的index的时候，为对应序号的的内容区添加类名
代码：

<!DOCTYPE html><html lang="en">
<head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        *{margin:0;padding:0;}        .tab{            width: 400px;            margin:0 auto;            border:1px solid gray;        }        ul{            list-style: none;            height: 40px;            width:100%;        }        ul li{            width: 100px;            text-align: center;            height: 40px;            line-height: 40px;            float: left;        }        ul li.con{            background-color: #ff6767;        }        .content{            width: 300px;            height: 400px;            border:1px solid red;            margin:0 auto;            display: none;            text-align: center;            line-height: 400px;        }        .content.con{            display: block;        }    </style></head>
<body>    <div id="app" class="tab">       <ul>           <li v-for="(item,index) in A" :key="index" :class="[num==index?'con':' ']" @click="btn(index)">{{item}}</li>       </ul>        <div v-for="(item,index) in B" :key="index" :class="['content',num==index?'con':' ']">{{item}}</div>    </div>   
    <script src="./js/vue.js"></script>
    <script>        var vm = new Vue({            el: "#app",            data: {                A:['标题一','标题二','标题三','标题四'],                B:['内容一','内容二','内容三','内容四'],                num:0            },            methods: {                btn(index){                   this.num = index;                 }            }
        })    </script></body>
</html>

代码：
在这里插入图片描述

_小郑有点困了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue-tab切换

vue-tab切换不用js单纯利用vue属性进行tab切换，可以实现轮播图效果效果图：功能：v-for生成tabbar和内容部分，利用点击时候传参与每个item的index进行三目运算匹配，当index等于这个被记录的index的时候，为对应序号的的内容区添加类名代码：<!DOCTYPE html><html lang="en"><head> ...
复制链接

扫一扫