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