vue.js 实现tab切换

最新推荐文章于 2024-08-05 19:35:10 发布

小马哥的天涯

最新推荐文章于 2024-08-05 19:35:10 发布

阅读量2k

点赞数 2

分类专栏： vue实践文章标签： vue tab

本文链接：https://blog.csdn.net/weixin_41296616/article/details/79137423

版权

vue实践专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue tab切换</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<style>
ul{
width: 100%;
height:30px;
}
li{
list-style-type:none;
float: left;
margin-left: 20px;
cursor: pointer;
}

</style>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in tabs" @click="tab(index)">{{item}}</li>
</ul>
<div class="tabCon">
<div v-for='(itemCon,index) in tabContents' v-show="index == num">{{itemCon}}</div>
</div>
</div>

vue 实现数据双向绑定我们不需要管dom 怎么实现只需要关注视图层