Vue의 스타일 바인딩에 대한 자세한 설명

Vue의 스타일 바인딩은 웹 페이지에서 널리 사용됩니다. CSS 스타일을 추가하고 CSS 스타일을 삭제하는 것은 jq로 구현하는 것이 어렵지 않습니다. 이번에는 Vue의 CSS 스타일 바인딩에 대한 지식 포인트를 극복하기 위해 예제를 사용합니다.

효과:

페이지에 "hello"라는 텍스트가 있습니다. 안녕하세요를 클릭하면 텍스트 색상이 빨간색으로 바뀌고 텍스트 색상이 다시 검은색으로 변합니다. 그런 다음 CSS 스타일을 통해 색상 변경을 제어해야 합니다.

방법 1:

 Hello World 
  

이 쓰기 방법을 설명하세요: class='{actived:isActived}', isActived가 false이면 class='', isActived가 true이면 class='actived'.

그래서 우리는 데이터에 기본값 false를 정의했습니다. 클릭하면 핸들클릭 메서드가 트리거되어 this.isActived가 부정된 값과 동일해집니다.

방법 2:

 Hello World 
  

이 방법에서는 배열을 제공하고 배열에 기본 null 값 isActived를 전달합니다. 여기서는 삼항 연산 연산자를 사용하여 가져옵니다. this.isActived의 값입니다.

삼항 연산자와 동일한 효과는 if 판단을 사용하는 것입니다:

if(this.isActived==''){ this.isActived='actived'; }else{ this.isActived=''; }

방법 3:

위에서는 클래스를 직접 사용하여 효과를 얻었는데 html에서 스타일 스타일을 어떻게 구현합니까? 코드는 어렵지 않습니다.

 Hello World 
 

기본적으로 검은색 글꼴을 사용합니다. 페이지 텍스트를 클릭한 후에는 handlerClick 함수가 계속 사용됩니다. 삼항 연산자 this.styleObj.color의 값을 결정하고 얻어 효과를 얻습니다.

관련 추천: "Javascript Advanced Tutorial"

위는 Vue에서 스타일 바인딩에 대한 설명입니다. 모든 길은 로마로 통합니다.

위 내용은 Vue의 스타일 바인딩에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!