vue tab切换

最新推荐文章于 2023-11-26 22:22:38 发布

青柠Q

最新推荐文章于 2023-11-26 22:22:38 发布

阅读量712

点赞数

本文链接：https://blog.csdn.net/LiuHanQingIT/article/details/77164452

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<style>

[v-cloak]{
display: none;
}
.active {
color: red;
border-bottom: 1px solid red;
}
ul li {
padding: 0 15px;
float:left;
list-style: none;
}
section{
width: 224px;
height: 100px;
margin-left: 40px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="root" v-cloak>
<ul>
<li @click="toggle(tab.index,tab.view)" v-for="tab in tabs" :class="{active: active == tab.index}">{{ tab.type }}</li>
</ul>
<br>
<section v-show="active==0">
<p>3223544</p>
</section>
<section v-show="active==1">
<p>yitytytytytyot</p>
</section>
<component :is="currentView" >
</component>

</div>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/vue-2.1.10.min.js"></script>
<script>
var vm=new Vue({
el: '#root',
data: {
currentView: 'dialog',
active:0,
tabs: [
{
index:0,
type: 'dialog tab',
view: 'dialog'
},{
index:1,
type: 'dialog2 tab',
view: 'dialog2'
}
]
},
methods: {
toggle(i,v) {
this.active = i;
this.currentView = v;
}
}
})
</script>
</body>
</html>

青柠Q

关注

0
点赞
踩
0

收藏

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

[v-cloak]{display: none;}.active { color: red; border-bottom: 1px solid red; } ul li { padding: 0 15px; float:lef
复制链接

扫一扫

vue tab切换

“相关推荐”对你有帮助么？