데이터바인딩

사용목적

- 자주 변경되는 데이터의 자동랜더링을 통한 교체, 하드코딩 방지 등

 

<script> 내 

data() {return {

        key:object 

    }

 

}

형식으로 js 내 데이터를 저장 후 html에서 사용가능

<script>

export default {
  name: 'App',
  data() {
    return{
      price1 : 60,      
      price2 : 40,
      products : ['1동원룸','2동원룸','3동원룸'],
      스타일 : 'color : blue',
    }
  },
  components: {
    
  }
}
</script>

 

 

 

 

<template>에서 상기 data의 키값을 불러와 데이터바인딩

 

내용: {{키값}} 형태로 작성

  <div>
    <p>{{ price1 }} 만원</p>
  </div>

 

HTML 속성: :속성="데이터 키값"

 <h4 :style = "스타일">xx 원룸</h4>