classStyleBinding
v-bind를 이용한 class binding을 알아보고, ref와 Array,reactive,computed의 관계를 알아보자

class binding


<script setup>
import { ref, reactive,computed } from 'vue'

const count = ref(0);
const countState = reactive({
  counts: count, 
});

let tag = ref(true);

const computedObject = computed(
() => {
  return {
    testClass: tag.value
  }
}
)

const classObject = reactive({
  active: tag, //.value = no
  'text-danger': false
})



const activeClass = ref('activeClass')
const arrayObject = reactive([activeClass])


const countUp = () =>{
  console.log('count:', countState.counts);
  return countState.counts++;
}
const changeRef = () =>  {
  tag.value = !(tag.value);
  console.log('tag:', tag.value);
}
const chageObject = () =>  {
  classObject.active = !(classObject.active);
  console.log('classObject.active', classObject.active);
}
const chageArray = () =>  {
  arrayObject[0].value = arrayObject[0].value + 's';
  console.log('arrayObject[0].value', arrayObject[0].value);
}
const chageComputed = () =>  {
  computedObject.testClass = !(computedObject.testClass)
  console.log('computedObject.testClass', computedObject.testClass);
}

</script>

<template>
  <button @click="countUp">
    countUp: {{ countState.counts }}
  </button>
  <br>
  
  <button @click="changeRef">
    ref is true ? {{ tag }}
  </button>
  <br>
  
  <button @click="changeObject">
    object ? {{ classObject.active }}
  </button>
  <br>
  
  <button @click="chageArray">
    array ? {{ arrayObject[0].value }}
  </button>
  <br>
  
  <button @click="chageComputed">
    computed ? {{ computedObject.testClass }}
  </button>
  <br>
  
  
  
  <div class="A" :class="computedObject">
    A Box
  </div>
  <div class="B" :class="{ testClass2: tag }">
    B Box
  </div>
  <div class="C" :class="classObject">
    C Box
  </div>
  <div class="D" :class="[activeClass]">
    D Box
  </div>
  <div class="E" :class="computedObject">
    E Box
  </div>
</template>

ref와 객체의 조합

ref + reactive

let tag = ref(true);
const classObject = reactive({
  active: tag, //.value = no
  'text-danger': false
})
const chageObject = () =>  {
  classObject.active = !(classObject.active);
  console.log('classObject.active', classObject.active);
}
  • ref + reactive => .value 붙일 필요가 없다

ref + computed

let tag = ref(true);
const computedObject = computed(
() => {
  return {
    testClass: tag.value
  }
}
)

const chageComputed = () =>  {
  computedObject.testClass = !(computedObject.testClass)
  console.log('computedObject.testClass', computedObject.testClass);
}
  • ref + computed => .value 붙여야함
  • 대신 computed에서 값을 변경하여도 ref는 반응이 없다. 즉, 단방향이다

ref + Array

const activeClass = ref('activeClass')
const arrayObject = reactive([activeClass])

const chageArray = () =>  {
  arrayObject[0].value = arrayObject[0].value + 's';
  console.log('arrayObject[0].value', arrayObject[0].value);
}
  • reactive객체 안에서는 .value를 붙이지않고, reactive객체를 사용할 땐 .value를 붙인다

소스코드 바로확인하기

참고자료: Vue3 완벽 마스터: 기초부터 실전까지 - “기본편”

Javascript

Frontend

Vue

댓글 쓰기

You may also enjoy

pinia기본

May 05 2023

src/main.js ```js import { createPinia } from ‘pinia’;

github pages에서 vue router 404 에러

April 03 2023

배경1. vue 프로젝트를 github pages를 통해 myurl.com에 배포를 했다 배경2. vue router를 사용하여 myurl.com/posts 페이지가 있다 배경3. vue router의 history모드는 createWebHistory를 사용한다 myurl.co...