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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

vue中使用sass及解決sass-loader版本過高導(dǎo)致的編譯錯(cuò)誤問題
這篇文章主要介紹了vue中使用sass及解決sass-loader版本過高導(dǎo)致的編譯錯(cuò)誤問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue2升級(jí)vue3問題bug解決分析整理
這篇文章主要介紹了vue2升級(jí)vue3遇到的問題bug解決分析整理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
vue刷新和tab切換實(shí)例
下面小編就為大家分享一篇vue刷新和tab切換實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
Vue3中各種靈活傳遞數(shù)據(jù)的方式小結(jié)
Vue 3 提供了多種數(shù)據(jù)傳遞的方式,讓我們的組件之間可以盡情地交流,接下來,我們就直接一個(gè)個(gè)來看,這些方式都是怎么工作的,感興趣的小伙伴跟著小編一起來看看吧
2024-07-07
Element-ui之ElScrollBar組件滾動(dòng)條的使用方法
這篇文章主要介紹了Element-ui之ElScrollBar組件滾動(dòng)條的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
詳解Vue + Vuex 如何使用 vm.$nextTick
這篇文章主要介紹了詳解Vue + Vuex 如何使用 vm.$nextTick，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
前端Vue手機(jī)號(hào)校驗(yàn)以及后端Java手機(jī)號(hào)校驗(yàn)例子
接收一個(gè)輸入的手機(jī)號(hào),判斷輸入的手機(jī)號(hào)是否正確是一個(gè)很常見的功能,這篇文章主要給大家介紹了關(guān)于前端Vue手機(jī)號(hào)校驗(yàn)以及后端Java手機(jī)號(hào)校驗(yàn)的相關(guān)資料,需要的朋友可以參考下
2023-11-11
element-ui中el-upload多文件一次性上傳的實(shí)現(xiàn)
這篇文章主要介紹了element-ui中el-upload多文件一次性上傳的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
ElementUI的this.$notify.close()調(diào)用不起作用的解決
本文主要介紹了ElementUI的this.$notify.close()調(diào)用不起作用的解決，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
vue3動(dòng)態(tài)添加路由
這篇文章主要介紹了vue3動(dòng)態(tài)添加路由,文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-06-06