Computed값수정/스타일동적바인딩/v-for구조분해할당/watch의여러변수감시

( 5번의 예제. 렌더링된 결과 확인)

1. computed값 수정하기

computed의 값을 수정하기 위해선 setter를 사용함

<script setup>
import { ref, computed } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
fullName.value = 'John Doe' // computed의 값을 수정함 (setter호출)

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 참고: 분해 할당 문법을 사용함.
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>

참고

2.스타일 동적바인딩

{ 스타일명 : 값 } , [ 인라인스타일 ] 형식으로 동적으로 style을 적용한다 (클래스 동적바인딩과 비슷)

const fontColor = 'color:red'
const size = 15
...
<div :style="[fontColor,{fontSize:size+'px'}]">테스트</div>

참고

3.v-for로 아이템을 구조분해할당해서 사용하는 예제

기본적으로 { } 를 사용하면 구조분해할당이 가능함

( )을 사용하는 경우는 index를 사용하는 경우임

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

*** 일반적인 v-for 사용 예제
<li v-for="item in items">
  {{ item.message }}
</li>

*** 구조 분해할당1
<li v-for="{ message } in items">
  {{ message }}
</li>

*** 구조분해할당 2
<!-- index 별칭도 사용하는 경우 -->
<li v-for="({ message }, index) in items">
  {{ message }} {{ index }}
</li>

4. watch로 여러 변수를 감시하기

첫번째 인자로 ( 함수,배열,변수 ) 등을 전달하여 변경을 감시를 할수있다

const x = ref(0)
const y = ref(0)

// 단일 변수 감시
watch(x, (newX) => {
  console.log(`x값: ${newX}`)
})

// 여러 변수감시(계산된 결과값 감시)
// getter함수를 첫번째 인자로 전달해서 x.value + y.value한 결과를 감시
watch(
  () => x.value + y.value,   // 첫번째인자 (getter함수)
  (sum) => {                 // 두번째인자 (setter함수)
    console.log(`x + y: ${sum}`)
  }
)

// 여러 변수감시(배열을 이용한 감시)
// 배열을 첫번째 인자로 전달해서 x와 y의 결과값을 감시
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x는 ${newX}이고, y는 ${newY} 입니다.`)
})

참고

5. 자식컴포넌트는 부모템플릿에서 자식컴포넌트의 속성으로 style,class,event를 입력하면 자식의 루트 엘리멘트에 자동으로 설정한다

부모템플릿

<자식컴포넌트 @click="이벤트1" style="color:red" class="test-class1">

자식컴포넌트

<button @click="이벤트2" style="width:100px" class="test-class2" /> 

실제 렌더링된 결과 ( 첨부이미지 확인)

<button @click="이벤트1,이벤트2" style="color:red; width:100px; " class="test-class1 test-class2" />

참고