vue.js怎么實現切換功能
1 回答

慕村9548890
TA貢獻1884條經驗 獲得超4個贊
用綁定不同class的方法來做:
<span v-bind:class="{'left': isClose, 'right': isOpen} switcher" v-on:click="switcher"></span>
<!--這個span就是圓形開關,點擊的時候觸發switcher方法-->
在vue實例中寫入標記和開關方法:
data: {
isClose: true,
isOpen: false//假設默認關閉
},
methods: {
switcher: function() {
//實現開關切換
isClose = !isClose;
isOpen = !isOpen;
}
}
css樣式:
.switcher {
transition: left 0.8s;
}
.left {
left: 0;
}
.right {
left: 50px;//移動50px
}
這樣就能通過點擊時改變css屬性,并配合transition來實現動態開關了。
添加回答
舉報
0/150
提交
取消