[Vue.js] 데이터 바인딩

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
	  <!-- 인라인 스타일 바인딩은 : 로 -->
    <h4 class="red" :style="스타일">{{ produtcs[0] }}</h4>
    <!-- 태그 안의 변수 바인딩은 {{ }} -->
    <p>{{ price1 }} 만원</p>
  </div>
  <div>
    <h4 :style="스타일">{{ produtcs[1] }}</h4>    
    <p>{{ price2 }} 만원</p>
  </div>
  <div>
    <h4 :style="스타일">{{ produtcs[2] }}</h4>    
    <p>{{ price3 }} 만원</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
	  // data 보관하는 곳
    return {
      price1 : 60,
      price2 : 70,
      price3 : 80,
      produtcs : ['역삼동원룸', '천호동원룸', '마포구원룸'],
      스타일 : 'color : blue',
      bold : 'font-weigt: bold'
    };
  },
  components: {},
};
</script>

• 태그 사이 데이터 바인딩 → {{ }}

• 태그 안의 데이터 바인딩 → 앞에 : 를 붙인다.