[뷰(Vue)] 데이터 바인딩, 반복문, 조건문

// 데이터 바인딩
    - JavaScript 데이터를 HTML에 주입한다.
    - {{ }} 를 사용한다.
    - data() 안에 object 형태로 선언한다.
    - HTML 속성도 데이터 바인딩 가능하다.

---

// 반복문

<v-for="변수명 in 범위" :key="변수명">

-  key는 반복되는 요소를 구별하기 위해서 필수적으로 사용해야 한다.

- 범위로 숫자 대신 Array 나 object도 넣을 수 있다. 

<a v-for="i in navbar" :key="i">{{ i }}</a>

- 변수명은 2개까지 지을 수 있다.
   - a > Array 내의 데이터
   - i > 1씩 증가하는 정수

<a v-for="(a,i) in navbar" :key="i">{{ a }}</a>

- img 반복은 require() 를 이용한다.

<img :src="require('./assets/room' + (i+1) + '.jpg')">

---

<template>

  <div v-for="(a,i) in products" :key="i">
    <h4>{{ a }}</h4>
    <p>{{ price[i] }}만원</p>
  </div>
  
</template>

<script>  

  export default {
    name: 'App',    
    data() {
      ///데이터 보관함(object 자료로)
      return {
        price : [40, 45],
        products: ['자연빌', 'cs타워'],
        navbar: ['Home', 'Shop', 'About']
      } 
    },
    components: {
    }
  }

---

// 조건문 (if문)

<div class="bg1" v-if="isOpen == true">

<div class="bg1" v-else>

* if-else의 경우 조건이 충족되는 것만 표, but v-show의 경우 display: none 으로 조절

---