HTML에 데이터 꽂아넣는 Vue 데이터바인딩 문법

document.getElementById().innerHTML = ??

기존 자바스크립트 데이터 바인딩 문법

 

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div>
    <h4> 원룸</h4>
    <p> {{price1}} 만원</p>
  </div>
  <div>
    <h4>XX 원룸</h4>
    <p> {{ price2 }} 만원</p>
  </div>

</template>

<script>


export default {
  name: 'App',
  data(){
    return {
      price1 : 60, 
      price2 : 70,
    }
  },
  components: {
    
  }
}
</script>

 

vue.js에서의 데이터 바인딩

 

html tag 속성도 데이터 바인딩 가능

  data(){
    return {
      price1 : 60, 
      price2 : 70,
      스타일 : 'color : blue'
    }
  },
  
  ...
      <h4 :style="스타일"> 원룸</h4>

속성 앞에 :를 붙인다.