웹사이트 검색

Vue.js에서 스타일 및 클래스 바인딩을 사용하는 방법


소개

이 기사에서는 Vue.js의 동적 스타일 및 클래스 바인딩에 대해 배웁니다. v-bind:style 지시문을 사용하면 클릭 이벤트에서 글꼴 크기를 시각화할 수 있습니다. v-bind:class를 사용하면 여러 클래스를 요소에 적용하는 방법을 관찰할 수 있습니다.

이것은 DOM 조작으로 가능하지만 Vue.js는 간결한 코드 라인으로 스타일과 클래스를 모두 동적으로 렌더링하고 데이터 모델 구조를 활용할 수 있습니다.

스타일을 동적으로 바인딩

Vue.js에서 사용자 입력에 따라 글꼴 크기를 늘리거나 줄이는 방법을 개발해 봅시다. 이를 위해 Vue는 v-bind:style 지시문을 제공합니다.

App.js 파일 내에서 Vue 인스턴스를 인스턴스화하고 데이터 모델을 포함합니다.

data() {
  return {
    fontSize: 10
  }
}

index.html 파일에 두 개의 버튼을 만들고 v-bind:style 지시문을 사용하는 단락을 만듭니다.

<button v-on:click="fontSize++">
  Increase font size
</button>
<button v-on:click="fontSize--">
  Decrease font size
</button>

<p v-bind:style="{ fontSize: fontSize + 'px' }">
  Font size is: {{ fontSize }}
</p>

각 클릭 이벤트에서 v-bind:style 지시문은 fontSize 변수의 값을 증가 및 감소시킵니다. 이렇게 하면 fontSize 값이 CSS font-size 속성에 연결됩니다.

필요한 경우 v-bind:style 지시문에 여러 스타일 개체를 추가합니다. App.js 파일에서 다음과 같이 스타일 개체를 포함합니다.

data() {
  return {
      baseStyles: {
      fontWeight:'800',
      color: 'red'
    },
      overrideStyles: {
      color:'blue'
    } 
  }
}

index.html 파일에서 스타일 개체의 배열을 제공합니다.

<p v-bind:style="[baseStyles, overrideStyles]">
  baseStyles and overrideStyles
</p>

참고: 다음 요소의 논리가 이전 요소보다 우선하므로 배열에서 스타일 개체의 순서에 주의하십시오.

스타일 바인딩을 검토했으므로 이제 Vue.js의 동적 클래스를 고려해 보겠습니다.

클래스를 동적으로 바인딩

스타일을 직접 적용하는 것은 요구 사항이 변경됨에 따라 복잡해질 수 있습니다. 이를 돕기 위해 v-bind:class 지시문은 클래스를 요소의 콘텐츠에 바인딩하는 방법을 제공합니다.

예를 들어 요소의 텍스트에 밑줄을 긋고 색상과 글꼴 두께를 변경해야 할 수 있습니다.

스타일 바인딩으로 구현할 수 있지만 Vue.js는 v-bind:class 지시문으로 추가 성능을 포함할 수 있습니다.

이를 달성하려면 App.jsHome을 사용하여 menuItems 배열과 selected 변수를 생성합니다. 코드> 파일:

data() {
  return {
    selected: 'Home',
    menuItems: ['Home', 'About', 'Contact']
  }
}

index.html 파일에서 정렬된 목록 내에 v-for 루프를 적용하여 menuItems 배열의 요소를 반복합니다.

각 클릭 이벤트에서 v-bind:class 지시문은 selected 변수의 값을 menuItems의 현재 요소에 할당합니다. 이렇게 하면 정렬된 목록 요소에 여러 클래스를 전달할 수 있고 CSS에 나열된 스타일을 추가할 수 있습니다.

<ul>
  <li v-for="item in menuItems"
    v-on:click="selected = item"
    v-bind:class="{ selected: selected == item}">
      {{item}}
  </li>
</ul>

v-bind:class 지시문을 사용하여 여러 클래스를 배열로 전달할 수도 있습니다.

App.js 파일 내에서 데이터 모델의 클래스 배열을 정의합니다.

data() {
  return {
    classArray: ['selected', 'underlined']
  }
}

index.html 파일에서 v-bind:class 지시문을 사용하여 classArray를 참조하십시오.

<p v-bind:class="[classArray]">
  Multiple classes {{ classArray }}
</p>

이렇게 하면 선택된 클래스와 밑줄 클래스가 모두 요소에 적용됩니다.

결론

Vue.js 스타일 및 클래스 지시문을 사용하면 요소 내에서 동적 작업을 유지하고 보다 강력한 성능을 위해 여러 인스턴스를 지원합니다.