vue.js怎么做选项卡
本文环境：windows7、vue2.9.6，该方法适用于所有品牌的电脑。
vue.js做选项卡的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tab选项卡</title>
<script src="js/vue.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
}
#tab{
width:420px;
margin: 20px auto;
position: relative;
}
#tab ul li{
width: 100px;
height: 30px;
border: 1px solid #6699CC;
float: left;
list-style: none;
text-align: center;
line-height: 30px;
}
#tab ul li:first-child{
border-right: none;
border-radius: 10px 0px 0px 0px;
}
#tab ul li:last-child{
border-left: none;
border-radius: 0px 10px 0px 0px;
}
#tab ul .active{
background-color:#6699CC;
color:white;
}
#tab div{
width: 415px;
position: absolute;
top: 32px;
display: none;
}
#tab div img{
width: 406px;
border-radius:0px 0px 10px 10px;
}
#tab div.current{
display: block;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li v-on:mouseover="change(index)" :class="[currentindex==index?'active':'']":key="item.id"v-for="(item,index) in list">{{item.text}}</li>
</ul>
<div :class="[currentindex==index?'current':'']" v-for="(item,index) in list">
<img :key="item.id" v-bind:src="item.imgsrc"/>
</div>
</div>
<script>
var vue1 = new Vue({
el:'#tab',
data:{
currentindex:'0',//当前选项卡的索引
list:[{
id:'1',
text:'春',
imgsrc:'img/1.jpg-600'
},{
id:'2',
text:'夏',
imgsrc:'img/2.jpg-600'
},{
id:'3',
text:'秋',
imgsrc:'img/3.jpg-600'
},{
id:'4',
text:'冬',
imgsrc:'img/4.jpg-600'
}]
},
methods:{
change:function(index){
this.currentindex=index;
}
}
});
</script>
</body>
</html>
标签：