前端ABC<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tab切换</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
*{
margin: 0;padding: 0;
}
ul li{
list-style: none;
}
#box{
width: 606px;
height: 354px;
border:1px solid black;
margin: 50px auto;
}
#head{
overflow: hidden;
}
#head h1{
width:200px;
height: 100px;
border:1px solid black;
font-size: 32px;
color: black;
float: left;
text-align: center;
line-height: 100px;
}
#con li{
width: 604px;
height: 250px;
border:1px solid black;
font-size: 45px;
text-align: center;
line-height: 250px;
color: black;
display: none;
}
#head .color{
background-color: green;
color: #fff;
}
#con .neirong{
display: block;
}
</style>
</head>
<body>
<div id="box">
<div id="head">
<h1 v-for="(h,index) in h1s" @click="Tab(index)" v-bind:class="{color:h.isfalse}">{{h.h1}}</h1>
</div>
<ul id="con">
<li v-for="(li,index) in lis" v-bind:class="{neirong:li.isfalse}">{{li.li}}</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:"#box",
data:{
h1s:[
{h1:"标题1",isfalse:true},
{h1:"标题2",isfalse:false},
{h1:"标题3",isfalse:false}
],
lis:[
{li:"内容111",isfalse:true},
{li:"内容222",isfalse:false},
{li:"内容333",isfalse:false}
] },
methods:{
Tab:function(index){
this.h1s.forEach(function(item){
item.isfalse=false;
});
this.lis.forEach(function(item){
item.isfalse=false;
})
this.h1s[index].isfalse=true;
this.lis[index].isfalse=true;
}
}
})
</script>
</html>
欢迎分享本文，转载请保留出处：前端ABC » 用vue写一个teb切换