1. [ Vue반복문 ]
Vue에도 마찬가지로 반복문이 있다.
1.2 [ Vue 반복문 이럴 때 사용한다 ]
1. 같은 태그들이 여러개가 필요할 때 Vue의 반복문을 이용한다
1.1 [ Vue 반복문 문법 ]
•
Vue의 반복문 문법은 아래와 같다
<태그 v-for="작명 in 반복횟수 or 데이터이름" :key="작명"></태그>
<a v-for="(작명,i) in 메뉴들" :key="i">{{ 작명 }}</a>
1.
같은 태그 정보만 반복하는 방법
a.
<태그 v-for="작명 in 반복횟수 key:"작명">
반복문 쓸 떄 key 안쓰면 오류나니깐 기억하기!
2.
데이터 정보를 가지고와서 반복하는방법
<태그 v-for="작명 in 데이터이름 key="작명">
그럼 반복횟수는 어떻게 작용할까? -> 자료안의 데이터갯수만큼 반복한다
그럼 작명한 변수는 데이터안의 자료가 됨
즉, 첫번째 돌때는 작명 = 자료들[0], 두번째돌때는 작명 = 자료들[1], 세번째 돌때는 작명 = 자료들[2] 이렇게 됨
•
key란 ?
반복문을 쓸 때 꼭 써야하며, 반복문 돌린요소를 컴퓨터가 구분하기 위해 씀,
반목문을 돌면서 변하는 숫자/문자이다
•
Vue 반복문에서 작명은 최대 2개까지 가능하다. 2개를 이용한 문법은 위에서 작성했지만 아래와 같다.
<a v-for="(작명,i) in 메뉴들" :key="i">{{ 작명 }}</a>
•
변수 작명 2개까지 가능, 왼쪽변수는 array내의 데이터, 오른쪽변수는 1씩증가하는정수
•
i 를 설정해주면 기본적으로 0, 1, 2 숫자를 반환해주어 Vue자체내에서 구분지어준다.
<!-- template안에는 HTML 코드 짜면된다.-->
<template>
<!--HTML 반복문-->
<!-- 같은 태그들이 여러개가 필요할 떄 vue 의 반복문을 이용하자 문법
: v-for="작명 in 몇번반복할지" -->
<!-- Vue의 HTML 반복문 정리
1. 같은 태그 정보만 반복하는방법
<태그 v-for="작명 in 반복횟수 key:"작명">
반복문 쓸 떄 key 안쓰면 오류나니깐 기억하기!
2. 데이터 정보를 가지고와서 반복하는방법
<태그 v-for="작명 in 데이터이름 key="작명">
그럼 반복횟수는 어떻게 작용할까? -> 자료안의 데이터갯수만큼 반복한다
그럼 작명한 변수는 데이터안의 자료가 됨
-> 즉, 첫번째 돌때는 작명 = 자료들[0], 두번째돌때는 작명 = 자료형[1],
세번째 돌때는 작명 = 자료형[2] 이렇게 됨
key 란? : 반복문을 쓸 때 꼭 써야하며, 반복문 돌린요소를 컴퓨터가 구분하기 위해 씀,
반복문을 돌면서 변하는 숫자/문자
변수 작명 2개까지 가능, 왼쪽변수는 array내의 데이터, 오른쪽변수는 1씩증가하는정수
-->
<div class="menu">
<a v-for="(작명,i) in 메뉴들" :key="i">{{ 작명 }}</a>
</div>
<!-- {{데이터 바인딩}} -js 데이터를 HTML에 꽂아 넣는 문법-->
<div v-for="(product,i) in products" :key="i">
<!-- HTML 속성도 데이터 바인딩 가능 표현할 때는 :속성="데이터이름"-->
<h4>{{product}}</h4>
<!-- 밑에 있는 데이터 HTML 데이터HTML에 꽂아넣고싶으면 {{데이터 이름}} -->
<p>{{ price1 }} 만원</p>
</div>
<!-- <div>
<h4>{{products[1]}}</h4>
<p>{{ price2 }} 만원</p>
</div>
<div>
<h4>{{products[2]}}</h4>
<p>{{ price3 }} 만원</p>
</div> -->
</template>
<!-- script안에는 JS 코드 짜면된다.-->
<script>
//문법만 달랑 배우면 혼자서 코드를 못짬, 이 문법 언제쓰는지 왜쓰는지 용도를 알아야됨
/** App Vue가 처음에 다 끌고와서 뿌려주는거임(대빵)*/
export default {
name: 'App',
//vue는 data를 여기다가 저장한다 data보관통
//{{데이터 바인딩}} 하는이유
// 1. HTML에 하드코딩 해놓으면 나중에 변경 어려움 (가변성있을때는 data바인딩하는게좋다)
// 2. Vue의 실시간 자동 렌더링 쓸때 -> Vue는 신기해서 Data를 변경하면 data와 관련된
//HTML에도 실시간으로 반영됨
// {{}} 이거 써야 실시간 자동렌더링 됨
data() {
return {
//여기에 데이터보관하자
//데이터는 object 자료로 저장해주셈 {자료이름 : 자료내용}
//충격 HTML 속성도 데이터 바인딩 가능
메뉴들 : ['Home', 'Shop', 'About'],
price : [50,60,70],
price1 : 50,
price2 : 60,
price3 : 70,
products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
}
},
components: {
}
}
</script>
<!-- style안에는 CSS 코드 짜면된다.-->
<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>
JavaScript
복사
