Muscardinus

Class Bind 본문

FrontEnd/Vue

Class Bind

Muscardinus 2021. 12. 29. 01:41
728x90

class를 Vue Instance의 데이터 혹은 다른 값에 따라서 동적으로 바꾸고 싶을 때가 있을 것이다.

 

그럴 경우,

<div id="app">
      <label> <input type="checkbox" v-model="isPurple" /> Purple </label>

      <div class="circle" :class="{ purple: isPurple }">Hi!</div>
    </div>
.purple{
    background-color: #767DEA;
}

이와 같이 :class를 선언하고 내부에 하나의 객체를 넣으면 된다.

그리고 원하는 class이름과 그에 따른 조건을 넣어주면 된다.

이러면, isPurple가 true일때, class에는 circle와 purple의 class가 적용될 것이다.

 

하지만, 더 많은 class를 동적으로 바꾸고 싶을 때가 있다. 이럴 때, computed를 사용하는 것이 좋다.

 

let vm = Vue.createApp({
  data() {
    return {
      isPurple: false,
    };
  },
  computed: {
    circle_classes() {
      return { purple: this.isPurple };
    },
  },
}).mount('#app');
<!DOCTYPE >
<html>
  <head>
    <title>VueJS Course</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>

  <body>
    <div id="app">
      <label> <input type="checkbox" v-model="isPurple" /> Purple </label>

      <div class="circle" :class="circle_classes">Hi!</div>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script src="app.js"></script>
  </body>
</html>

마지막으로, 만약 더 많은 class에 대해서 동적으로 받고 싶으면, 배열을 쓰는 방법도 있다.

<!DOCTYPE >
<html>
  <head>
    <title>VueJS Course</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>

  <body>
    <div id="app">
      <label> <input type="checkbox" v-model="isPurple" /> Purple </label>

      <select name="" id="" v-model="selectedColor">
        <option value="">White</option>
        <option value="text-black">Black</option>
        <option value="text-orange">Orange</option>
      </select>

      <div class="circle" :class="[selectedColor, circle_classes]">Hi!</div>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script src="app.js"></script>
  </body>
</html>
let vm = Vue.createApp({
  data() {
    return {
      isPurple: false,
      selectedColor: '',
    };
  },
  computed: {
    circle_classes() {
      return { purple: this.isPurple };
    },
  },
}).mount('#app');
728x90

'FrontEnd > Vue' 카테고리의 다른 글

Conditional Rendering  (0) 2021.12.29
Style Binding  (0) 2021.12.29
Computed  (0) 2021.12.29
v-on  (0) 2021.12.28
v-bind  (0) 2021.12.28
'FrontEnd/Vue' Related Articles more
Comments