Vue.js는 매일 수업과 스타일 바인딩을 배워야합니다

데이터 바인딩의 일반적인 요구 사항은 작동 요소의 클래스 목록 및 인라인 스타일입니다. 그것들은 모두 속성이기 때문에 v-bind로 처리 할 수 있습니다. 표현식의 최종 문자열을 계산하십시오. 그러나 문자열 스 플라이 싱은 번거롭고 실수가 쉽습니다. 따라서 vue.js는 V-Bind가 클래스와 스타일에 사용될 때 특히 향상됩니다. 표현식의 결과 유형은 문자열 외에 물체 또는 배열 일 수 있습니다.

HTML 클래스를 바인딩하십시오

콧수염 태그를 사용하여`{ % raw %} class = "{{classname}}"{ % endRaw %}`과 같은 클래스 바인드 클래스를 사용할 수 있지만이 쓰기 메소드 및`v-bind : class`를 권장하지 않습니다. 둘 중 하나만 선택할 수 있습니다!

객체 구문

v-bind : class to switch 클래스를 동적으로 전달할 수 있습니다. V-Bind : Class Directive는 일반적인 클래스 기능과 공존 할 수 있습니다.

 <div v-bind : class = "{ 'class-A': ISA, 'class-B': isb}"> </div> 데이터 : {isa : true, isb : false}

렌더링 :

<div> </div>

ISA와 ISB가 변경되면 클래스 목록이 그에 따라 업데이트됩니다. 예를 들어, ISB가 True가되면 클래스 목록은 "정적 클래스 A Class-B"가됩니다.

데이터에서 객체를 직접 바인딩 할 수도 있습니다.

 <div v-bind : class = "classObject"> </div> 데이터 : {classObject : { 'class-A': true, 'class-b': false}}

우리는 여기에 객체를 반환하는 계산 된 속성을 바인딩 할 수 있습니다. 이것은 일반적으로 사용되고 강력한 모드입니다.

배열 구문

배열을 V-Bind : 클래스로 전달하여 클래스 목록을 적용 할 수 있습니다.

 <div v-bind : class = "[classa, classb]"> data : {classa : 'class-A', classb : 'class-b'}

렌더링 :

<div> </div>

조건에 따라 목록에서 클래스를 전환하려면 3 배 표현식을 사용할 수 있습니다.

<div v-bind : class = "[classa, isb? classb : '']">

이 예제는 항상 classa를 추가하지만 ISB가 참인 경우에만 classB입니다.

그러나 여러 조건부 클래스가있을 때는이 방법을 작성하는 것이 약간 번거 롭습니다. 1.0.19+에서 객체 구문을 배열 구문에서 사용할 수 있습니다.

<div v-bind : class = "[classa, {classb : isb, classc : isc}]">

인라인 스타일을 바인딩합니다

객체 구문

V -Bind : Style의 객체 구문은 매우 직관적입니다. CSS와 매우 유사 해 보이지만 실제로는 JavaScript 객체입니다. CSS 속성 이름은 Camelcase 또는 Short Horizontal Separation (Kebab-Case)에 의해 명명 될 수 있습니다.

 <div v-bind : style = "{color : activecolor, fontsize : fontsize + 'px'}"> </div> 데이터 : {activecolor : 'red', fontsize : 30}

일반적으로 스타일 객체에 직접 바인딩하는 것이 좋습니다. 템플릿을 명확하게합니다.

 <div v-bind : style = "styleObject"> </div> 데이터 : {styleObject : {color : 'red', fontsize : '13px'}}

마찬가지로, 객체 구문은 종종 반환 된 객체의 계산 된 특성과 함께 사용됩니다.

배열 구문

v-bind : Style의 배열 구문은 여러 스타일 객체를 하나의 요소에 적용 할 수 있습니다.

<div v-bind : style = "[styleObjecta, styleObjectB]">

접두사를 자동으로 추가합니다

V-Bind : Style이 CSS 속성을 사용하는 경우 벤더 접두사가 필요한 CSS 속성을 사용하여 vue.js는 해당 접두사를 자동으로 감지하고 추가합니다.

이 기사는 "vue.js 프론트 엔드 구성 요소 학습 튜토리얼"으로 편집되었으며 모두가 배우고 읽을 수 있습니다.

vue.js 구성 요소에 대한 튜토리얼은 특수 주제 vue.js 구성 요소 학습 자습서를 클릭하여 학습하십시오.

더 많은 Vue Learning Tutorials를 보려면 특별 주제 "Vue Practical Tutorial"을 읽으십시오.

위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.