1. 서문
나는 모든 사람들이 데이터 바인딩에 대한 일반적인 요구 사항이 작동 요소의 클래스 목록과 인라인 스타일이라고 생각합니다. 그것들은 모두 속성이므로 v-bind 로 처리 할 수 있습니다. 표현식의 최종 문자열을 계산하면됩니다. 그러나 문자열 스 플라이 싱은 번거롭고 실수가 쉽습니다. 따라서 v-bind 클래스와 스타일에 사용될 때 Vue.js는 구체적으로 향상됩니다. 표현식의 결과 유형은 문자열 외에 물체 또는 배열 일 수 있습니다.
2. HTML 클래스 바인드
참고 : 콧수염 태그를 사용하여 class="{{ className }}" 과 같은 클래스를 바인딩 할 수 있지만이 쓰기 메소드 및 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가되면 클래스 목록은 " static class-a class-b "가됩니다.
데이터에서 객체를 직접 바인딩 할 수도 있습니다.
<div v-bind : class = "classObject"> </div>
데이터 : {classObject : { 'class-A': true, 'class-b': false}}}우리는 여기에 객체를 반환하는 계산 된 속성을 바인딩 할 수 있습니다. 이것은 일반적으로 사용되고 강력한 모드입니다.
배열 구문
배열을 v-bind:class 로 전달하여 클래스 목록을 적용 할 수 있습니다.
<div v-bind : class = "[classa, classb]">
데이터 : {classa : 'class-A', classb : 'class-b'}}렌더링 :
<div> </div>
조건에 따라 목록에서 클래스를 전환하려면 3 배 표현식을 사용할 수 있습니다.
<div v-bind : class = "[classa, isb? classb : '']">
이 예제는 항상 classa를 추가하지만 ISB가 참인 경우에만 classB입니다.
2. 인라인 스타일을 바인딩합니다
객체 구문
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'}}마찬가지로, 객체 구문은 종종 반환 된 객체의 계산 된 특성과 함께 사용됩니다.
3. 배열 구문
v-bind:style 의 배열 구문은 여러 스타일 객체를 하나의 요소에 적용 할 수 있습니다.
<div v-bind : style = "[styleObjecta, styleObjectB]">
접두사를 자동으로 추가합니다
v-bind:style CSS 속성을 사용하는 경우 벤더 접두사가 필요한 CSS 속성을 사용하여 vue.js는 해당 접두사를 자동으로 감지하고 추가합니다.
4. 요약
위는 vue.js 바인딩 클래스 및 스타일 스타일의 전체 내용입니다. 이 기사는 자세히 소개되며 특정 참조 학습 값이 있습니다. Vue.js를 배우는 것이 모두 도움이되기를 바랍니다. 편집자는 또한 vue.js에 대한 정보를 다시 업데이트 할 것입니다. 관심있는 친구, Wulin.com에 계속주의를 기울이십시오.