[Vue] 데이터 바인딩과 반복문

<template>

  <img alt="Vue logo" src="./assets/logo.png" />

  <div></div>

</template>

<script>

export default {

  name: "App",

  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>

 

 

정리한다 .

 

<template>

  <img alt="Vue logo" src="./assets/logo.png" />

  <div>

    <h4>XX 원룸</h4>

    <P>XX 만원</P>

  </div>

  <div>

    <h4>XX 원룸</h4>

    <P>XX 만원</P>

  </div>

</template>

<script>

export default {

  name: "App",

  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>

 

데이터를 바인딩을 하기 위해서는 

 

script에 입력한다.

 

<script>

export default {

  name: "App",

  data() {

    return {

     

    }

  },

  components: {},

};

</script>

 

 

return 안에 데이터를 object형태로 작성하면된다.

<template>

  <img alt="Vue logo" src="./assets/logo.png" />

  <div>

    <h4>XX 원룸</h4>

    <P>{{ price1 }} 만원</P>

  </div>

  <div>

    <h4>XX 원룸</h4>

    <P>XX 만원</P>

  </div>

</template>

<script>

export default {

  name: "App",

  data() {

    return {

      price1: 60, //왼쪽에 키,오른쪽 값

    };

  },

  components: {},

};

</script>

 

그리고 중괄호 두개로 price1를 가져온다

 

price2 도 만들어본다.

<template>

  <img alt="Vue logo" src="./assets/logo.png" />

  <div>

    <h4>XX 원룸</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>

 

데이터 바인딩 하는 이유 

1. html을 하드코딩을 할 경우 변경이 어렵다.

2. 실시간 자동 렌더링 기능을 사용하기 위해서는 데이터 바인딩을 해야한다.

 

 

과제 

 

products 배열 생성 후  html에서 데이터 바인딩하기 

 

<script>

export default {

  name: "App",

  data() {

    return {

      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],

    };

  },

  components: {},

};

</script>

 

<template>

  <img alt="Vue logo" src="./assets/logo.png" />

  <div>

    <h4>{{ products[0] }}</h4>

    <P>50 만원</P>

  </div>

  <div>

    <h4>{{ products[1] }}</h4>

    <P>70 만원</P>

  </div>

  <div>

    <h4>{{ products[2] }}</h4>

    <P>80 만원</P>

  </div>

</template>

 

 

결과

 

현재 같은 코드가 반복된다. 

 

그래서 

반복문을 사용하여 간편하게 사용가능하다

 

 

  <div class="menu">

    <a>Home</a>

    <a>Products</a>

    <a>About</a>

  </div>

 

 

 

<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;

}

.menu {

  background: darkslateblue;

  padding: 15px;

  border-radius: 5px;

}

.menu a {

  color: white;

  padding: 10px;

}

</style>

 

 

 

 

a태그에 반복문을 넣어보자 

 

   <a v-for="작명 in 3" :key="작명">Home</a>

 

v-for을 사용하면됨 key를 꼭 사용해야한다.

아니면 에러남

 in에는 몇 번 반복할건지작성함 

 

 

배열안의 메뉴들을 반복문으로 반복해서 넣고싶다.

<script>

export default {

  name: "App",

  data() {

    return {

      메뉴들: ["Home", "Shop", "About"],

      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],

    };

  },

  components: {},

};

</script>

 

  <div class="menu">

    <a v-for="작명 in 메뉴들" :key="작명">Home</a>

  </div>

 

in를 메뉴들로 바꿔서 메뉴들 배열안의 데이터를 하나씩 가져온다.

 

  <div class="menu">

    <a v-for="작명 in 메뉴들" :key="작명">{{ 작명 }}</a>

  </div>

 

Home 대신 {{ 작명 }}으로 변경하면 아래와 같이 출력된다.

 

 

 

 

작명 말고 아무거나 사용해도됨 i 든 a든 등

 

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

 

이름을 두개로 설정할 수 있음 (a,i)

 

 

숙제

 

위의 products들도 반복문으로 수정해보자 

 

  <div v-for="(a, i) in products" :key="i">

    <h4>{{ products[i] }}</h4>

    <P>50 만원</P>

  </div>