1.switch开关案例
改开关案例由两个div构成，通过vue进行类的添加和删除来改变背景颜色和平移达到效果。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.con2{
width: 60px;
height: 20px;
border-radius: 15px;
background-color: red;
padding: 2px;
transition: all 1s;
}
.con2 div{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: white;
transition: all 1s;
}
.con{
background-color: green;
}
.con div{
margin-left: 39px;
}
</style>
</head>
<body>
<div id="app">
<div :class="{con:flag,con2:true}" @click="f1">
<div></div>
</div>
</div>
</body>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
flag:false
},
methods:{
f1:function(){
this.flag=!this.flag
}
},
})
</script>
</html>2.选项卡案例
该选项卡使用vue中data的两个数组对内容进行添加，通过索引值进行相互匹配，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tabs{
width: 300px;
margin: 20px auto;
}
.titles{
display: flex;
justify-content: start;
border-bottom: 1px solid #ccc;
}
.titles .title{
padding: 5px 20px;
height: 30px;
line-height: 30px;
cursor: pointer;
}
.titles .active{
background-color: blue;
color: #fff;
}
.contents .active{
display: block;
}
.contents{
border: 1px solid #ccc;
padding: 10px;
border-top: none;
}
.contents div{
display: none;
}
</style>
</head>
<body>
<div id="app">
<div class="tabs">
<div class="titles">
<div :class="{title:true,active:i==index}" v-for="(t,i) in tabs.titles" :key="i" @click="myClick(i)">
{
{t}}
</div>
</div>
<div class="contents">
<div :class="{con:true,active:i==index}" v-for="(c,i) in tabs.contents" :key="i">
{
{c}}
</div>
</div>
</div>
</div>
</body>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
index:0,
tabs:{
titles:["亚瑟","程咬金","妲己"],
contents:['人在塔在',"来，我们打一架","羁绊是什么"]
}
},
methods:{
myClick(a){
//
this.index = a
}
},
})
</script>
</html>