[Vue] 동적 전달인자(Dynamic Parameter)

⚠️ 이 포스팅은 Vue3(한국어): 템플릿 문법을 공부하고 정리한 블로그 포스팅입니다. ⚠️

1. 디렉티브
   1. 동적 전달인자

 

---

 

동적 전달인자(Dynamic Parameter)

데이터를 HTML의 속성 이름으로 사용하고 싶을때 Javascript 표현식처럼 대괄호로 묶어 디렉티브의 인수(argument)로 사용할 수 있다. 아래 예제에선 h1 요소의 속성값 :[attr]="'active'" @[event]="add"는 결과적으로 :class="msg" @click="add"를 의미한다. v-bind를 생략해 :로 v-on:을 생략해 @로 사용하였다. 속성값으로 데이터가 아닌 문자열을 사용하고 싶을때는 작은따옴표로 속성값을 넣어주면 된다. 아래의 예제에서는 active라는 문자열을 class로 사용하기 위해 작은따옴표로 한번더 감싸주었다. 작은따옴표로 감싸주지 않으면 class="active"에서 active는 아래의 데이터를 가리키게되는데 active라는 데이터가 없으므로 클래스가 정상적으로 입력되지 않게 된다.

<template>
  <h1 :[attr]="'active'" @[event]="add">{{ msg }}</h1>
  <!-- :class="active" @click="add" -->
  <!-- :[attr]="msg"를 사용하면 add 메서드가 실행될때 msg값이 바뀌므로 class도 바뀐다 -->
  <!-- '' 작은 따옴표로 묶어 클래스이름을 데이터가 아닌 문자열로 만들어준다 -->
</template>

<script>
export default {
  name: 'StringComp',
  data() {
    return {
      msg: 'active',
      attr: 'class',
      event: 'click',
    };
  },
  methods: {
    add() {
      this.msg += '!';
    },
  },
};
</script>

<style scoped>
.active {
  color: royalblue;
  font-size: 100px;
}
</style>