Vue에서 클릭 후 텍스트 색상을 변경하는 방법

이제 Vue가 클릭 후 텍스트 색상 변경을 구현하는 방법에 대한 기사를 공유하겠습니다. 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

여기서 텍스트를 예로 사용하면 이미지 전환의 원리는 동일합니다

일반적인 아이디어는 다음과 같습니다. 클래스 전후에 텍스트를 전환하려면 동일한 클래스에 두 개의 스팬을 사용하세요. 주된 이유는 동일하기 때문입니다. 변환 전과 후의 텍스트 위치는 동일합니다. 그런 다음 클릭 이벤트를 사용하여 가시성을 제어합니다.

코드는 다음과 같습니다:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!