Vue實現(xiàn)點擊后文字變色切換方法
更新時間：2018年02月11日 10:23:06 作者：HaiJing1995
下面小編就為大家分享一篇Vue實現(xiàn)點擊后文字變色切換方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
這里用文字舉例，圖片切換的原理也是一樣的
大概思路是：用兩個class相同的span分別是切換前后的文字，class相同主要是為了變換前后的文字位置相同。然后用click事件控制它們的顯隱。
代碼如下：
HTML：
<span class="response" v-show="!showCommentInput" @click="showCommentInput = !showCommentInput">回復(fù)</span> <span class="response" v-show="showCommentInput" @click="showCommentInput = !showCommentInput">回復(fù)</span>
JS：
data(){
return {
showCommentInput = false,
}
}
CSS：
.response {
font-size:14px;
color: #3e3e3e;
&:hover{
font-weight: bold;
}
&+.response {
font-weight: bold;
}
以上這篇Vue實現(xiàn)點擊后文字變色切換方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中使用sass及解決sass-loader版本過高導(dǎo)致的編譯錯誤問題
這篇文章主要介紹了vue中使用sass及解決sass-loader版本過高導(dǎo)致的編譯錯誤問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue2升級vue3遇到的問題bug解決分析整理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
下面小編就為大家分享一篇vue刷新和tab切換實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue3中各種靈活傳遞數(shù)據(jù)的方式小結(jié)
Vue 3 提供了多種數(shù)據(jù)傳遞的方式,讓我們的組件之間可以盡情地交流,接下來,我們就直接一個個來看,這些方式都是怎么工作的,感興趣的小伙伴跟著小編一起來看看吧2024-07-07
Element-ui之ElScrollBar組件滾動條的使用方法
這篇文章主要介紹了Element-ui之ElScrollBar組件滾動條的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
詳解Vue + Vuex 如何使用 vm.$nextTick
這篇文章主要介紹了詳解Vue + Vuex 如何使用 vm.$nextTick，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
接收一個輸入的手機號,判斷輸入的手機號是否正確是一個很常見的功能,這篇文章主要給大家介紹了關(guān)于前端Vue手機號校驗以及后端Java手機號校驗的相關(guān)資料,需要的朋友可以參考下2023-11-11
element-ui中el-upload多文件一次性上傳的實現(xiàn)
這篇文章主要介紹了element-ui中el-upload多文件一次性上傳的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
ElementUI的this.$notify.close()調(diào)用不起作用的解決
本文主要介紹了ElementUI的this.$notify.close()調(diào)用不起作用的解決，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue3動態(tài)添加路由,文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06