1. Vue의 HTML반복문(v-for)
< 태그 v-for = "a in b : key="변수명">
data: {
b: [ 'x', 'y', 'z' ]
}1) a : 새롭게 선언할 변수
- a는 array가 반복되면서 불러올 요소 하나하나를 의미
- (a, i) 등으로 2개 변수 선언 가능
- a : array 내 데이터
- i : 1씩 증가하는 정수
2) b : 반복횟수
(리스트 변수 넣으면 해당 리스트 크기만큼 반복)
3) key
반복문 쓸 때, key 안쓰면 에러발생할 수 있음(key : 반복문 돌린 요소를 컴퓨터가 구분하기 위해 사용)
- array, object 집어넣기 가능(자료안의 데이터 갯수만큼 반복
4) key-value 형태의 object 자료형 중 일부 불러올려면 object.key 입력
<template>
<div class="menu">
<a v-for =" a in b : key="a">{{ a }}</a>
</div>
</template>
<script>
export default {
name: '#데이터이름', //어떤 요소에 적용할지 지정, 해당 예제는 id="데이터이름"에
data() { //사용할 정보 선언
return {
b : ['80', '90', '100'],
}
}
}
</script>2. 조건문(v-if, v-else, v-else-if)
< 태그 v-if="조건 상태">1) v-if : "조건 상태"가 true면 해당 태그를 렌더링, false면 해당 태그를 렌더링하지 않음
2) v-else : v-if다음에 사용되어 v-if가 만족하지 않는 경우 렌더링
3) v-else-if도 존재
ex)
- html
<div>
<p v-if="flag">참인 메시지</p>
<p v-else>거짓인 메시지</p>
<button v-on:click="flag = !flag">메시지 변경</button>
</div>- js
data : {
flag: true
}- 위의 셋팅의 경우 버튼을 누르면 참인메시지 <-> 거짓인 메시지로 글이 변경
