ホームページ > ウェブフロントエンド > jsチュートリアル > Vueでクリック後にテキストの色を変更する方法

Vueでクリック後にテキストの色を変更する方法

亚连
リリース: 2018-06-06 10:22:53
オリジナル
6436 人が閲覧しました

ここで、クリック後のテキストの色の変更を実装する Vue メソッドを共有します。これは良い参考値であり、皆さんの役に立つことを願っています。

ここでは例としてテキストを使用しますが、画像切り替えの原理は同じです

一般的な考え方は次のとおりです: 同じクラスの 2 つのスパンを使用して、クラスの前後でテキストを切り替えるのは主に同じです。変換前後のテキストの位置は同じです。次に、クリック イベントを使用して、その表示を制御します。

コードは次のとおりです:

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;
 }
ログイン後にコピー

上記は私がまとめたものです将来的には誰にとっても役立つでしょう。

関連記事:

Webpackのホットデプロイメントでファイルの変更が検出されない問題を解決する

webpack-dev-serverにページの自動更新を実装する

jqueryテクノロジーを使用して虫眼鏡を実装する

以上がVueでクリック後にテキストの色を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート