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">回復</span> <span class="response" v-show="showCommentInput" @click="showCommentInput = !showCommentInput">回復</span>
JS：
data(){
return {
showCommentInput = false,
}
}
CSS：
.response {
font-size:14px;
color: #3e3e3e;
&:hover{
font-weight: bold;
}
&+.response {
font-weight: bold;
}
以上這篇Vue實現(xiàn)點擊后文字變色切換方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue3造輪子之打包構建配置二級目錄方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
單元測試是用來測試項目中的一個模塊的功能，本文主要介紹了前端Vue單元測試入門教程，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
本文給大家介紹了使用vuex的state狀態(tài)對象的5種方式，給大家貼出了我的vuex的結構，感興趣的朋友跟隨腳本之家小編一起學習吧2018-04-04
本文主要介紹了vue3的內置組件匯總,詳細的介紹了Fragment,Teleport,Suspense三個組件的使用,具有一定的參考價值,感興趣的可以了解一下2024-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡易計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
要想實現(xiàn)列表的動態(tài)無縫滾動,本文為大家推薦兩款組件,vue-seamless-scroll和vue3-seamless-scroll,組件的用法也非常簡單,下面就跟隨小編一起來學習一下吧2024-11-11
Vue項目localhost:8080無法訪問此網(wǎng)站，拒絕了我們的連接請求的解決方案
前端頁面使用的是vue,vue項目啟動成功,沒有任何報錯,服務控制臺已出現(xiàn)APP訪問地址,點擊訪問地址出現(xiàn)無法訪問此網(wǎng)站,拒絕了我們的連接請求,所以本文給大家介紹了Vue項目localhost:8080無法訪問此網(wǎng)站,拒絕了我們的連接請求的解決方案,需要的朋友可以參考下2024-12-12
最近接手做一個前端小項目，基于vue實現(xiàn)答題功能，具體功能有判斷用戶是否答對，答對的話跳到下一題，答錯的話彈窗告訴用戶有錯題，請重新答題，功能非常人性化，對實現(xiàn)代碼感興趣的朋友一起看看吧2021-06-06
element-ui是一個比較完善的UI庫,但是使用它需要有一點vue的基礎，下面這篇文章主要給大家介紹了關于在vue 2.0項目中如何引入element-ui的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
Vue+Node.js+WebSocket實現(xiàn)即時通訊
本文主要介紹了Vue+Node.js+WebSocket實現(xiàn)即時通訊，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05