vue에서 클래스를 동적으로 바인딩하는 방법은 무엇입니까? 방법 소개

Vue.js의 핵심은 일반 HTML 템플릿의 특수 구문을 사용하여 DOM을 기본 데이터에 "바인딩"할 수 있게 해주는 반응형 데이터 바인딩 시스템입니다.

바인딩된 DOM은 데이터와 동기화됩니다. 데이터가 변경될 때마다 해당 DOM 뷰도 업데이트됩니다. 이 기능을 기반으로 vue.js를 통해 클래스를 동적으로 바인딩하는 것이 매우 간단해집니다.

1. 데이터 바인딩

vue 지침은 v- 접두사로 표시됩니다. 데이터 바인딩 지침 v-bind: 속성 이름으로 약칭:

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

2. 동적으로 바인딩된 class

vue의 기본 구분 기호는 {{ }}입니다. 구분 기호의 문자열은 class="{{ className }} "<로 전달될 수 있는 데이터 변수로 간주됩니다. /code> 메소드를 사용하여 클래스를 설정하지만 Vue에서는 이 메소드를 v-bind:class 메소드와 혼합하는 것을 권장하지 않습니다. 둘 중 하나만 선택할 수 있습니다. <code>class="{{ className }}" 方式设置class，但是vue不推荐这种方式与 v-bind:class 的方式混用，二者只能选其一。

v-bind:class

v-bind:class 클래스 속성의 변수 바인딩 방식과 공존할 수는 없지만 네이티브 클래스 기능과 공존할 수는 있습니다. DOM 태그: class에서 동시에.

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

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

2.2 v-bind:class가 데이터 변수를 지원하는 경우. 변수 값이 변경되면 클래스도 동시에 업데이트됩니다. v-bind:class 지시문의 값은 javascript 표현식과 같은 바인딩 표현식으로 제한됩니다.

HTML 코드:

<div :class="classA">Demo2</div>

Javascript 코드:

data: {
  classA: 'class-a'  //当classA改变时将更新class
}

Rendered HTML:

<div class="class-a">Demo2</div>

지시문은 자바스크립트 표현식과 같은 표현식으로 간주되므로 v-bind:class는 삼항 연산을 허용합니다:

HTML 코드:

<div :class="classA ? &#39;class-a&#39; : &#39;class-b&#39; ">Demo3</div>

Rendered HTML:

<div class="class-a">Demo3</div>

2.3 v-bind:class는 객체, 객체 변경을 지원합니다.

HTML 코드:

<div :class="{ &#39;class-a&#39;: isA, &#39;class-b&#39;: isB}">Demo4</div>

Javascript 코드:

data: {
  isA: false,  //当isA改变时，将更新class
  isB: true    //当isB改变时，将更新class
}

Rendered HTML:

<div class="class-b">Demo4</div>

HTML 코드:

<div :class="objectClass">Demo5</div>

Javascript 코드:

data: {
  objectClass: {
    class-a: true,
    class-b: false
  }
}

Rendered HTML:

<div class="class-a">Demo5</div>

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

<div :class="[classA, classB]">Demo6</div>

Javascript 코드:

data: {
  classA: 'class-a',
  classB: 'class-b'
}

Rendered HTML:

<div class="class-a class-b">Demo6</div>

배열에는 개체 유형이 포함될 수 있습니다. 객체 객체가 변경되면 클래스 목록도 업데이트됩니다.

HTML 코드:

<div :class="[classA, classB]">Demo7</div>

Javascript 코드:

data: {
  classA: 'class-a',
  objectClass: {
    classB: 'class-b',  // classB 的值为class-b, 则将classB的值添加到class列表
    classC: false,    // classC值为false,将不添加classC
    classD: true    // classD 值为true，classC将被直接添加到class列表
}
}

Rendered HTML:

<div class="class-a class-b classD">Demo7</div>

관련 권장 사항:

2020 프론트 엔드 Vue 인터뷰 질문 요약(첨부) 답변)

vue 튜토리얼 추천: 2020년 최신 5개 vue.js 비디오 튜토리얼 선택

더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요:

Programming Teaching! !

위 내용은 vue에서 클래스를 동적으로 바인딩하는 방법은 무엇입니까? 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!