[vue] v-bind 사용 예제

뷰 공식 사이트 예제

Do it 시리즈에는 환경 설정, 패키지 관련된 내용을 꽤나 많은 지면에 활용한다.
Vue.js 공식 사이트에서는 개념을 바로바로 CLI에서 연습해볼 수 있는 환경을 제공한다.
퀴즈를 풀 듯이 내가 직접 적용해본 코드와 제시문이 의도한 바를 비교해볼 수 있다.
아래는 그 예제들 중 하나에 해당하는 v-bind 예제이다.

<script>
export default {
  data() {
    return {
      titleClass: 'title'
    }
  }
}
</script>

<template>
  <h1 :class="titleClass">Make me red</h1>
</template>

<style>
.title {
  color: red;
}
</style>

template 태그 내용을 좀 더 뜯어보자.

• h1 대신 p 태그 따위도 활용 가능
• class 대신 id 삽입 가능
• 콜론은 v-bind의 약식 문법이다. 원래는 태그 안에 v-bind:id이런 식으로 작성해야 함