Vue 템플릿으로 CSS 클래스를 바인딩하는 방법

때때로 우리는 vuejs 앱에서 css 클래스를 조건부로 바인딩해야 할 수도 있습니다. 여기에서 이 예제를 따라 vue 템플릿으로 css 클래스를 바인딩할 수 있습니다.

1. 버튼이 있습니다. 클릭하면 클래스를 추가하여 텍스트 색상이 변경됩니다.

<template>
  <div class="main">
    <p class="p-me color-me">Awsome vue</p>

    <button @click="colorMe = true">Add Class</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      colorMe: false,
    };
  },
};
</script>

<style scoped>
.change-me {
  font-size: 2rem;
}

.color-me {
  color: goldenrod;
}
</style>

2. 'colorMe'의 값을 변경할 버튼에 이벤트 리스너를 추가합니다.

<button @click="colorMe = true">Add Class</button>

3. 'colorMe'라는 vue 인스턴스에서 데이터 속성을 정의합니다.

export default {
  name: "App",
  data() {
    return {
      colorMe: false,
    };
  },
};

4. 버튼 클릭 후 적용할 css class 생성

<style scoped>
.change-me {
  font-size: 2rem;
}

.color-me {
  color: goldenrod;
}
</style>

5. 여기서 멋진 부분이 나옵니다. 클래스를 :class와 같이 바인딩하고 js es6 템플릿 리터럴 표현식으로 적용합니다.

 <p :class="`p-me ${colorMe && 'color-me'}`">Awsome vue</p>

👉 colorMe의 반전 값을 colorMe의 값으로 설정하여 클래스를 토글할 수도 있습니다. 아래와 같이

  <button @click="colorMe = !colorMe">Add Class</button>

그리고 그게 다야. 당신은 vuejs의 멋진 클래스 바인딩 기능을 수행했습니다 😃

전체 코드는 여기에서 확인하세요Here 🚀