鍍金池/ 問答/HTML/ 關(guān)于一個(gè)播放按鈕的故事？

關(guān)于一個(gè)播放按鈕的故事？

clipboard.png

對(duì)于這樣一個(gè)按鈕，點(diǎn)擊播放暫停自然是它的基本功能，我這也實(shí)現(xiàn)了
代碼如下：（注：vue）

clipboard.png

clipboard.png

現(xiàn)在我要添加的功能是，點(diǎn)擊播放時(shí)按鈕隱藏，暫停時(shí)顯示
我試過在里面添加刪減類的方式但并不好使，有什么好的辦法可以解決這個(gè)問題呢？

回答
編輯回答
赱丅呿

data里綁定一個(gè)標(biāo)記：

data:{
    visible: false
}
// 點(diǎn)擊的時(shí)候
this.visible改為ture，同時(shí)video.pause()

html內(nèi)用visible來顯示隱藏
2017年5月3日 04:34
編輯回答
薔薇花

你有一個(gè)pasued屬性，可以作為狀態(tài)標(biāo)志啊，存在的時(shí)候就顯示，否則就隱藏了（但有一個(gè)問題，如果隱藏了你怎么點(diǎn)擊？）

2017年5月22日 15:56
編輯回答
伐木累

在你的基礎(chǔ)上可以添加一個(gè)狀態(tài)值，例如 pauseBtnShow，綁定在這個(gè)暫停按鈕上v-show，根據(jù)你暫停和播放狀態(tài)進(jìn)行切換即可

2018年7月17日 08:14
編輯回答
糖果果

樣式控制，this.isActive = !this.isActive;
html：<p v-bind:class="{'f-btnActive':isActive}"></p>
初始化state：isActive: false

2017年11月4日 23:11