Vue.js 동적 바인딩 클래스에 대한 자세한 소개-JS 튜토리얼-php.cn

Vue.js 동적 바인딩 클래스에 대한 자세한 소개

怪我咯

풀어 주다： 2017-03-29 16:35:23

원래의

1193명이 탐색했습니다.

Vue.js의 핵심은 반응형 데이터 바인딩 시스템: 일반 HTML 템플릿의 특수 구문을 사용하여 DOM을 기본 데이터에 "바인딩"할 수 있습니다. 바인딩된 DOM은 언제든지 데이터와 동기화됩니다. 데이터가 변경되면 해당 DOM 뷰도 이 기능을 기반으로 업데이트됩니다. 🎜>class는 매우 간단해집니다. 🎜>vue 명령어는 v- 접두사로 표시됩니다. 데이터 바인딩 명령어 v-bind:attributename은 속성 이름으로 축약됩니다. 간단한 데이터 바인딩 예시는 다음과 같습니다:

<a v-bind:href="http://www.cnblogs.com/">博客园首页</a>
简写：
<a :href="http://www.cnblogs.com/">博客园首页</a>

로그인 후 복사

2. 동적 바인딩 클래스

vue의 기본 구분 기호는 {{ }}이고, < 구분 기호 안의 🎜>문자열

은 데이터변수 로 간주되며 class="{{ className }}"을 통해 클래스를 설정할 수 있지만 vue에서는 이 방법을 v와 혼합하는 것을 권장하지 않습니다. -bind:class, 둘 중 하나만 선택 가능

첫째, v-bind:class는 클래스 속성에서 변수를 바인딩하는 방식과 공존할 수 없지만, Native 클래스 기능과 공존할 수 있습니다. 및 v-bind:class는 DOM 태그에 나타날 수 있습니다.

2.1 v-bind:class는 string
유형을 지원하므로 사용하지 않는 것이 좋습니다. 문자열 값이 고정되어 있어 클래스를 동적으로 변경할 필요성을 인식할 수 없습니다

HTML代码：
<p :class=" &#39;classA classB&#39; ">Demo1</p>
渲染后的HTML:
<p class="classA classB">Demo1</p>

로그인 후 복사

2.2 v-bind:class는 데이터 변수를 지원합니다. 변수 값이 변경되면 클래스는 동시에 업데이트됩니다. v-bind:class 지시문의 값은

표현식
으로 제한됩니다. 예를 들어
javascriptexpression

HTML代码：
<p :class="classA">Demo2</p>
Javascript代码：
data: {
 classA: &#39;class-a&#39; //当classA改变时将更新class
}
渲染后的HTML:
<p class="class-a">Demo2</p>

로그인 후 복사

입니다.

명령어에 적힌 값은 자바스크립트 표현식과 같은 표현식으로 간주되므로 v-bind:class 삼항 연산을 허용합니다:

HTML代码：
<p :class="classA ? &#39;class-a&#39; : &#39;class-b&#39; ">Demo3</p>
渲染后的HTML:
<p class="class-a">Demo3</p>

로그인 후 복사

2.3 v- 바인딩:클래스는 객체, 클래스

HTML代码：
<p :class="{ &#39;class-a&#39;: isA, &#39;class-b&#39;: isB}">Demo4</p>
Javascript代码：
data: {
 isA: false, //当isA改变时，将更新class
 isB: true //当isB改变时，将更新class
}
渲染后的HTML:
<p class="class-b">Demo4</p>

로그인 후 복사

를 지원하며 객체가 변경되면 동적으로 업데이트됩니다.

HTML代码：
<p :class="objectClass">Demo5</p>
Javascript代码：
data: {
 objectClass: {
 class-a: true,
 class-b: false
 }
}
渲染后的HTML:
<p class="class-a">Demo5</p>

로그인 후 복사

2.4: v-bind:class는 배열을 지원합니다. 배열의 변수가 변경되면 클래스 목록이 동적으로 업데이트됩니다.

HTML代码：
<p :class="[classA, classB]">Demo6</p>
Javascript代码：
data: {
 classA: &#39;class-a&#39;,
 classB: &#39;class-b&#39;
}
渲染后的HTML:
<p class="class-a class-b">Demo6</p>

로그인 후 복사

객체 클래스 유형을 포함할 수 있습니다. 배열의

객체 객체
가 변경되면 클래스 목록

위 내용은 Vue.js 동적 바인딩 클래스에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!