作者:mobiledu2502924027 | 来源:互联网 | 2023-10-13 08:08
用绑定不同class的方法来做:<spanv-bind:class={left:isClose,right:isOpen}switcherv-on:click=
用绑定不同class的方法来做:
在vue实例中写入标记和开关方法:
data:{
isClose:true,
isOpen:false//假设默认关闭
},
methods:{
switcher:function(){
//实现开关切换
isClose=!isClose;
isOpen=!isOpen;
}
}
css样式:
.switcher{
transition:left0.8s;
}
.left{
left:0;
}
.right{
left:50px;//移动50px
}
这样就能通过点击时改变css属性,并配合transition来实现动态开关了vue怎么设置圆形。