<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡切换</title>
<script type="text/javascript" src="js/vue.js" ></script>
<style>
*{
margin: 0;
}
.tabNav{
width: 500px;
height: 40px;
border: 1px solid black;
display: flex;
background: #337AB7;
margin: 0 auto;
}
.tabNav .item{
flex: 1;
}
.tabNav .item a{
display: block;
height: 40px;
text-align: center;
line-height: 40px;
color: #fff;
}
.tabNav .item a.active{
background: #fff;
color: #000000;
}
.tabCon{
width: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="app">
<div class="tabNav">
<div class="item" v-for="(item,index) in tabNav">
<a href="javascript:;" :class="{active:item.active}"
@click="toggle(index)">
{{item.title}}
</a>
</div>
</div>
<div class="tabCon">
<p v-for="list in tabCon" v-if="list.isShow">
{{list.content}}
</p>
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
tabNav:[
{title:"选项1",active:true},
{title:"选项2",active:false},
{title:"选项3",active:false}
],
tabCon:[
{content:"1",isShow:true},
{content:"2",isShow:false},
{content:"3",isShow:false}
]
},
methods:{
toggle:function(index){
// alert(index)
for (var i=0;i<this.tabNav.length;i++) {
this.tabNav[i].active = false
this.tabCon[i].isShow = false
}
this.tabNav[index].active = true
this.tabCon[index].isShow = true
}
}
})
</script>
</body>
</html>
Vue入门练习09--选项卡切换
猜你喜欢
转载自blog.csdn.net/AsaZyf/article/details/83315290
今日推荐
周排行