데이터 바인딩

목차

• 데이터 바인딩
• 스타일 적용

---

 데이터 바인딩

{{ }}

<!-- src/App.vue -->
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div>
    <h4>{{ product1 }}</h4>
    <p>{{ price1 }}원</p>
  </div>
  <div>
    <h4>{{ product2 }}</h4>
    <p>{{ price2 }}원</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() { // 데이터 바인딩
    return {
      product1 : '양말'
      ,price1 : '3800'
      ,product2 : '바지'
      ,price2 : '5000'
    }
  },
}
</script>

---

 

 스타일 적용

HTML태그에 :style

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div>
    <h4>{{ product1 }}</h4>
    <p>{{ price1 }}원</p>
  </div>
  <div>
    <h4 :style="styleR">{{ product2 }}</h4>
    <p>{{ price2 }}원</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() { // 데이터 바인딩
    return {
      styleR : 'color : red'
    }
  },
}
</script>

---

 

Github

Link