Vue.js 데이터 바인딩, 반복문(v-for)

- 데이터 바인딩 사용하는 이유

1)당연히 변수를 사용하기 위함

2)Vue의 실시간 자동 렌더링 쓰려고

3)자주 변할거 같은 데이터들은 data()에 보관해서 사용

4)script쪽에 data(){}로 데이터 저장해서 사용한다.

5)HTML속성 역시 데이터 바인딩으로 사용이 가능하다. ( :속성="데이터이름" )

 

<template>
  <!-- 최상위에 div태그 오류 제거용 아니면 vuetur대신 volar쓰면 해결 -->
  <!-- https://skillazit.tistory.com/46 -->
  <div>
  <img alt="Vue logo" src="./assets/logo.png">
  <div>
    <h4 id ="" class="red" :style="스타일">{{ products[0] }}</h4>
    <!--HTML속성도 데이터바인딩 가능 :속성="데이터이름" -->
    <p>{{ price1 }} 만원</p>
  </div>
  <div>
    <h4>{{ products[1] }}</h4>
    <p>{{ price2 }} 만원</p>
  </div>
  <div>
    <h4>{{ products[2] }}</h4>
    <p>{{ price2 }} 만원</p>
  </div>
  
</div>
</template>

<script>



export default {
  name: 'App',
  data(){
    return{
      // 여기다 데이터 보관, object자료로
      price1 : 60,
      price2 : 70,
      price3:80,
      스타일 : 'color:blue',
      products: ["은평구원룸",'천호동원룸','마포구원룸'],


    }
  },
  components: {

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

- v-for 반복문

v-for="작명 in 숫자,aaray,obect" :key="작명"

1)array/object집어넣기 가능 그럼 자료안의 데이터 갯수만큼 반복됨

2)숫자넣으면 숫자만큼 반복됨

<a v-for="name in menu" :key="name">{{ name }}</a>

이와같이하면 원하는대로 쓸 수 있다. 

 

3)key=""의 용도 : 반복문 돌린 요소를 컴퓨터가 구분하기 위해 씀 반복문에 꼭 써야한다.

 

4)2가지 요소 까지 사용가능 (변수, 인덱스)

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

최종적으로 메뉴, 원룸이름, 가격 전부 v-for로 작성해본 코드

<template>

  <div>

  

    <div class="menu">
      <!-- Vue의 HTML 반복문 -->
      <!-- <a>Home </a>
      <a>Products </a>
      <a>About </a> -->

      <a v-for="(a,i) in 메뉴들" :key="i">{{ a }} {{ i }}</a>
      <!-- 자료안의 갯수만큼 반복 -->
      <!-- :띄어쓰기 X -->
      <!-- <a v-for="작명 in 3" :key="작명">Home</a> -->
      <!-- 숫자만큼 반복 -->

    </div>
  
    <div v-for="(a,i) in products" :key="i">
      <h4>{{ a }}</h4>
      <p>{{prices[i] }}</p>
    </div>
  <!-- <div>
    <h4 id ="" class="red" :style="스타일">{{ products[0] }}</h4>
    <p>{{ price1 }} 만원</p>
  </div>
  <div>
    <h4>{{ products[1] }}</h4>
    <p>{{ price2 }} 만원</p>
  </div>
  <div>
    <h4>{{ products[2] }}</h4>
    <p>{{ price2 }} 만원</p>
  </div> -->
  
</div>
</template>

<script>



export default {
  name: 'App',
  data(){
    return{
      // 여기다 데이터 보관, object자료로
      price1 : 60,
      price2 : 70,
      price3:80,
      prices:[60,70,80],
      스타일 : 'color:blue',
      products: ["은평구원룸",'천호동원룸','마포구원룸'],
      메뉴들 : ["Home","Shop","About"],


    }
  },
  components: {

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.menu{
  background: darkslateblue;
  padding:15px;
  border-radius: 5px;
}
.menu a{
  color:white;
  padding:10px;
}
</style>

 

ps. vscode에서 <template>쪽밑줄오류날 때 해결법 (vetur 사용시에)

https://skillazit.tistory.com/46