本文环境：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'
},{
id:'2',
text:'夏',
imgsrc:'img/2.jpg'
},{
id:'3',
text:'秋',
imgsrc:'img/3.jpg'
},{
id:'4',
text:'冬',
imgsrc:'img/4.jpg'
}]
},
methods:{
change:function(index){
this.currentindex=index;
}
}
});
</script>
</body>
</html>
以上就是vue.js怎么做选项卡的详细内容，更多请关注其它相关文章！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
