用綁定不同class的方法來做：
<span v-bind:class="{'left': isClose, 'right': isOpen} switcher" v-on:click="switcher"></span>
<!--這個span就是圓形開關(guān)，點(diǎn)擊的時候觸發(fā)switcher方法-->
在vue實(shí)例中寫入標(biāo)記和開關(guān)方法：
data: {
isClose: true,
isOpen: false//假設(shè)默認(rèn)關(guān)閉
},
methods: {
switcher: function() {
//實(shí)現(xiàn)開關(guān)切換
isClose = !isClose;
isOpen = !isOpen;
}
}
css樣式：
.switcher {
transition: left 0.8s;
}
.left {
left: 0;
}
.right {
left: 50px;//移動50px
}
這樣就能通過點(diǎn)擊時改變css屬性，并配合transition來實(shí)現(xiàn)動態(tài)開關(guān)了。