Vue實(shí)現(xiàn)點(diǎn)擊后文字變色切換方法

更新時(shí)間：2018年02月11日 10:23:06 作者：HaiJing1995

下面小編就為大家分享一篇Vue實(shí)現(xiàn)點(diǎn)擊后文字變色切換方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

這里用文字舉例，圖片切換的原理也是一樣的

大概思路是：用兩個(gè)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實(shí)現(xiàn)點(diǎn)擊后文字變色切換方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3造輪子之打包構(gòu)建配置二級(jí)目錄方式
這篇文章主要介紹了Vue3造輪子之打包構(gòu)建配置二級(jí)目錄方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
前端Vue單元測(cè)試入門(mén)教程
單元測(cè)試是用來(lái)測(cè)試項(xiàng)目中的一個(gè)模塊的功能，本文主要介紹了前端Vue單元測(cè)試入門(mén)教程，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-12-12
使用vuex的state狀態(tài)對(duì)象的5種方式
本文給大家介紹了使用vuex的state狀態(tài)對(duì)象的5種方式，給大家貼出了我的vuex的結(jié)構(gòu)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
2018-04-04
vue3的內(nèi)置組件匯總
本文主要介紹了vue3的內(nèi)置組件匯總,詳細(xì)的介紹了Fragment,Teleport,Suspense三個(gè)組件的使用,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-01-01
vue實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-01-01
vue實(shí)現(xiàn)列表無(wú)縫動(dòng)態(tài)滾動(dòng)
要想實(shí)現(xiàn)列表的動(dòng)態(tài)無(wú)縫滾動(dòng),本文為大家推薦兩款組件,vue-seamless-scroll和vue3-seamless-scroll,組件的用法也非常簡(jiǎn)單,下面就跟隨小編一起來(lái)學(xué)習(xí)一下吧
2024-11-11
Vue項(xiàng)目localhost:8080無(wú)法訪問(wèn)此網(wǎng)站，拒絕了我們的連接請(qǐng)求的解決方案
前端頁(yè)面使用的是vue,vue項(xiàng)目啟動(dòng)成功,沒(méi)有任何報(bào)錯(cuò),服務(wù)控制臺(tái)已出現(xiàn)APP訪問(wèn)地址,點(diǎn)擊訪問(wèn)地址出現(xiàn)無(wú)法訪問(wèn)此網(wǎng)站,拒絕了我們的連接請(qǐng)求,所以本文給大家介紹了Vue項(xiàng)目localhost:8080無(wú)法訪問(wèn)此網(wǎng)站,拒絕了我們的連接請(qǐng)求的解決方案,需要的朋友可以參考下
2024-12-12
Vue實(shí)現(xiàn)答題功能
最近接手做一個(gè)前端小項(xiàng)目，基于vue實(shí)現(xiàn)答題功能，具體功能有判斷用戶是否答對(duì)，答對(duì)的話跳到下一題，答錯(cuò)的話彈窗告訴用戶有錯(cuò)題，請(qǐng)重新答題，功能非常人性化，對(duì)實(shí)現(xiàn)代碼感興趣的朋友一起看看吧
2021-06-06
vue 2.0項(xiàng)目中如何引入element-ui詳解
element-ui是一個(gè)比較完善的UI庫(kù),但是使用它需要有一點(diǎn)vue的基礎(chǔ)，下面這篇文章主要給大家介紹了關(guān)于在vue 2.0項(xiàng)目中如何引入element-ui的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-09-09
Vue+Node.js+WebSocket實(shí)現(xiàn)即時(shí)通訊
本文主要介紹了Vue+Node.js+WebSocket實(shí)現(xiàn)即時(shí)通訊，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05