css样式
<style>
*{
margin: 0;
padding: 0;
}
.app{
background-color: red;
width: 100px;
height: 36px;
border-radius: 18px;
overflow: hidden;
transition: all 1s;
}
.app>div{
background-color: #fff;
width: 34px;
height: 34px;
border-radius: 50%;
transition: all 1s;
margin: 1px;
}
.active1{
background-color: green;
}
.active{
transform: translateX(64px);
}
</style>
html
<div class="wrapper">
<div class="app" :class="sum==true? 'active1':'' " @click="demo()">
<div :class="sum==true? 'active':''"></div>
</div>
<span>状态:{{msg}}</span>
</div>
javascript
<script src="../js/vue.js"></script>
<script>
const vm = new Vue({
//挂载dom
el:".wrapper",
//数据
data:{
sum:false,
msg: 'OFF'
},
methods: {
demo(sum){
if(this.sum==false){
this.sum=true
this.msg='ON'
}else{
this.sum=false
this.msg='OFF'
}
}
},
})