Note 속성 값의 단축 사용
Vue 3.4(package.json 파일에서 "vue"의 값이 3.4.x 이상)부터 속성과 값이 같은 이름이면 단축할 수 있는 기능이 추가됐습니다. 그래서 다음과 같이 v.bind를 한 번 더 단축해서 사용할 수 있습니다.
<script>
export default {
data() {
return {
id: 'title',
class: 'red-color',
};
},
}
</script>
<template>
<!-- <h1 id="title" class="red-color">Hello, Vue JS</h1> -->
<h1 :id="id" :class="class">Hello, Vue JS</h1>
<h1 :id :class>Hello, Vue JS</h1> ----- 값 단축
</template>