[Vue.js] {{데이터 바인딩}}

{{데이터바인딩}} 하는 이유

• HTML에 하드코딩을 하면 나중에 변경하기 어렵습니다
• Vue의 실시간 자동 렌더링을 사용할 수 있습니다
  (data를 변경하면 data와 관련된 HTML에도 실시간으로 반영됩니다)

데이팅 바인딩 하는 방법

<script>
export default {
  name: 'App',
  data(){
    return {
		//이 부분에 데이터 입력하기!!
     	 products : ['구미동원룸', '금곡동원룸', '정자동원룸'],
    }
  },
  components: {
  }
}
</script>

step2 : {{데이터이름}}

<template>
  <div>
    <h4>{{products[0]}}</h4>
    <p>{{price1}}만원</p>
  </div>
  <div>
    <h4>{{products[1]}}</h4>
    <p>60만원</p>
  </div>
  <div>
    <h4>{{products[2]}}</h4>
    <p>70만원</p>
  </div>
</template>

---

--- CODE ---

//App.vue

<template>
  <div>
    <h4>{{products[0]}}</h4>
    <p>{{price1}}만원</p>
  </div>
  <div>
    <h4>{{products[1]}}</h4>
    <p>60만원</p>
  </div>
  <div>
    <h4>{{products[2]}}</h4>
    <p>70만원</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      //이 부분에 데이터 입력하기!!
      products : ['구미동원룸', '금곡동원룸', '정자동원룸'],
      price1 : 50,
    }
  },
}
</script>

---

(추가)
HTML 속성도 데이터바인딩을 할 수 있습니다
:속성="데이터이름"

<template>
<h4 class="red" :style="스타일">정자동 원룸</h4>
</template>

<script>
export default {
	name:'App',
    data(){
    	return {
        	스타일 : 'color : blue'
        }
    }
}
</script>