Vue.js - 데이터 바인딩(v-bind) (유튜브 코딩애플 2강)

• <template>에서 변수(데이터)를 직접 다룰 수 있음 (데이터 바인딩)
  • <template> 안에 {{ 데이터_이름 }} 이용
  • <script> 안에 data() { return { object } } 이용 (object → 데이터_이름: 데이터_값)
  • style 등 html 태그의 속성에 사용 시 속성 앞에 ":" 붙임 (v-bind:style → :style)

예시

• Vue의 실시간 자동 렌더링 기능이 있음 (데이터가 변경이 되면 데이터 값이 자동으로 변경 됨
• v-bind 안에 정적 문자열 사용 시 `${ 데이터 이름 }` 사용

<img v-bind:style="`width: ${데이터_이름}px;`">

 

동영상 링크: https://youtu.be/0BbF7UxKKvg