vue的tab切换

最新推荐文章于 2023-11-20 08:34:24 发布

Java张一口慧

最新推荐文章于 2023-11-20 08:34:24 发布

阅读量147

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/qq_44847231/article/details/102393311

版权

vue的tab切换

思想：
其实tab切换分两大块，上面的哪一行是一个ul，里面有四个li，下面的内容是四个div只不过只显示一个，其内容对应上面的li
现在要做的就是点击li时显示对应的div。所以当我们点击li时可以获取其index值，然后显示对应index的div。

<!DOCTYPE html>
<html>
<head>
    <title>tab</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
 
<body>
    <div id="my">
        <div class="myTab">
            <ul class="tab-tit">
                <!-- 遍历lists获取title的值以及index，点击时获取该index并将其传给num。 -->
                <li v-for="(v,i) in lists" @click="change(i)" :class="{'active':num==i}">
                    {{v.title}}
                </li>
            </ul>
            <div>
                <!-- 遍历lists获取content的值以及index，显示index==num的div，这个num对应的是title的index -->
                <div v-for="(v,i) in lists" v-show="num==i">
                      {{v.content}}
                </div>
				
            </div>
        </div>
    </div>
 
</body>
<script>
    new Vue({
        el:'#my',//挂载元素
        data:{
            num:0,
            lists:[
                {title:'AAA',content:'aaa'},
                {title:'BBB',content:'bbb'},
                {title:'CCC',content:'ccc'},
                {title:'DDD',content:'ddd'}
            ]
        },
        methods:{//change方法，点击时将点击的title的index传给num，通过num来控制显示的cntent内容
            change:function(i){
                 this.num=i;
            }
        }
 
    });

</script>
</html>

先使用v-for把数据遍历渲染到页面上，
v-for中有一个i表示索引，将i作为参数传入到change（i）这个函数中，
在data中定义一个num变量，在title中如果i= =num,这个title就会添加一个acive的class。
当然，这个num是需要在change（）这个函数中不断改变的，需要将传入的索引值赋值给num，
这样,我们就可以用v-show做下判断。v-show=”i==num”,
如果等于的话，当前的内容就会显示。否则隐藏

Java张一口慧

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue的tab切换

vue的tab切换思想：其实tab切换分两大块，上面的哪一行是一个ul，里面有四个li，下面的内容是四个div只不过只显示一个，其内容对应上面的li现在要做的就是点击li时显示对应的div。所以当我们点击li时可以获取其index值，然后显示对应index的div。<!DOCTYPE html><html><head> <title&g...
复制链接

扫一扫