第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

vue.js怎么實現(xiàn)切換功能

vue.js怎么實現(xiàn)切換功能

眼眸繁星 2018-08-28 05:05:52
vue.js怎么實現(xiàn)切換功能
查看完整描述

1 回答

?
慕村9548890

TA貢獻1884條經(jīng)驗 獲得超4個贊

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

查看完整回答
反對 回復 2018-09-01
  • 1 回答
  • 0 關注
  • 1065 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號