Vue实现选项卡效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<script src="../vue.js"></script>
<style>
*{
padding: 0px;
margin: 0px;
}
.wrapper{
margin: 50px auto;
width: 450px;
height:400px;
border: 1px solid #000;
}
.nav{
list-style: none;
width: 450px;
height: 80px;
font-size: 0px;
}
.nav li{
width: 148px;
height:80px;
font-size: 16px;
border: 1px solid #000;
display: inline-block;
text-align: center;
line-height: 80px
}
.content div{
width: 450px;
height: 320px;
text-align: center;
line-height: 320px;
background:pink;
}
.primary{
background:red
}
.default{
background:#aaa;
}
</style>
</head>
<body>
<div id='app'>
<div class='wrapper'>
<ul class='nav'>
<li v-for='(item,index) in list'
@click='sel(index)'
:class='index==selIndex?"primary":"default"'
>{{item.title}}</li>
</ul>
<div class='content'>
<div v-for='(item,index) in list'
v-if='index==selIndex'
>{{item.info}}</div>
</div>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
list:[{title:'荷花',info:'小荷才露尖尖角，早有蜻蜓立上头'},
{title:'菊花',info:'采菊东篱下，悠然见南山'},
{title:'梅花',info:'墙角数枝梅，凌寒独自开'}],
selIndex:0
},
methods: {
sel(index){
this.selIndex=index
}
},
})
</script>
</body>
</html>
