vue.js는 클래스와 스타일 스타일을 바인딩합니다.

데이터 바인딩에 대한 일반적인 요구 사항은 요소의 클래스 목록과 해당 인라인 스타일을 조작하는 것입니다. 그것들은 모두 속성이므로 v-bind를 사용하여 이를 처리할 수 있습니다. 표현식의 최종 문자열만 평가하면 됩니다. 그러나 문자열 연결은 번거롭고 오류가 발생하기 쉽습니다. 따라서 Vue.js는 클래스 및 스타일과 함께 사용될 때 v-bind를 특별히 향상시킵니다. 문자열 외에도 표현식의 결과 유형은 객체 또는 배열일 수도 있습니다.

v-bind:class 또는 :class를 사용하여 스타일 또는 클래스 바인딩

클래스 바인딩

<div class="test">
  <div :class="{active:isActive,cc:isCc}"></div>
 </div>

js 코드

var myVue = new Vue({
   el: ".test",
   data: {
     isActive:true,
     isCc:false
   },
 });

또는 다음 코드도 구현할 수 있습니다

<div class="test">
   <div :class=classObject></div>
 </div>

js 코드

var myVue = new Vue({
    el: ".test",
    data: {
      classObject:{
        active:true
      }
    },
  });

배열을 통한 클래스 바인딩

<div class="test">
  <div :class="[activeClass,error]">dsdsd</div>
</div>

js 코드

var myVue = new Vue({
   el: ".test",
   data: {
     activeClass:"active",
     error:"ddd"
   },
 });

스타일 속성 바인딩

<div class="test">
    <div :style=styleObject>dsdsd</div>
  </div>

js 코드

var myVue = new Vue({
  el: ".test",
  data: {
    styleObject:{
     color: "red",
      fontSize: "30px"
    }
  },
});

이상 내용이 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되길 바라며, 또한 PHP 중국어 홈페이지를 응원해주시기 바랍니다.

vue.js 바인딩 클래스 및 스타일과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!