[Vue.js] 3. 반복문 v-for, 조건문 v-if

v-for

HTML에서 사용하는 반복문

<태그 v-for="a" in 몇회" :key="a">{{a}}</태그>

 

<template>
    <div class="menu">
        <a v-for="(a, i) in menu" :key="i" href="">{{ a }}</a>
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            menu: ['Home', 'Products', 'About'],
        };
    },
    components: {},
};
</script>

결과

 

:key="" 

1. 반복문 사용 시 필수
2. 반복문을 돌린 요소를 컴퓨터가 구분하기 위해 사용

 

---

 

v-if

HTML에서 사용하는 조건문

<div v-if="1 === 2">1은 2이다</div>
<div v-else-if="1 === 3">1은 3이다</div>
<div v-else>1은 2도 아니고 3도 아니다</div>