[Vue.js] 조건문과 반복문

공식 가이드 문서를 참고하여 조건문과 반복문에 대해 정리합니다.

https://kr.vuejs.org/v2/guide/index.html#%EC%A1%B0%EA%B1%B4%EB%AC%B8%EA%B3%BC-%EB%B0%98%EB%B3%B5%EB%AC%B8

시작하기 — Vue.js

APP.vue는 SFC(Single File Component)로 아래와 같이 세가지의 태그로 구성할 수 있습니다.

• template
• script
• style

 

조건문

h2의 0을 클릭해서 0보다 커지면 '0보다 큽니다' 라는 문구가 출력되도록 조건문을 실행해보겠습니다.

v-if로 조건문을 사용합니다.

 

App.vue 파일 내용

<template>
    <h2 @click='increase'>
        {{ count }}
    </h2>
    <div v-if='count > 0'>
        0보다 큽니다!
    </div>
</template>

<script>
export default {
    data() {
        return {
            count: 0,
        }
    },
    methods:{
        increase: function() {
            this.count += 1
        }
    }
}
</script>

 

반복문

v-for로 반복문을 사용합니다.

 

App.vue 파일 내용

<template>
    <ul>
        <li
            v-for='color in colors'
            :key='color'>
            {{ color }}
        </li>
    </ul>
</template>

<script>
export default {
    data() {
        return {
            colors: ['Red', 'Orange', 'Yellow']
        }
    }
}
</script>

출력내용

 

위 반복문 내용을 컴포넌트로 나눌 수 있습니다.

먼저 src> components > Color.vue 파일을 생성해줍니다.

 

Color.vue 파일 내용

<template>
    <li>{{name}}</li>
</template>

<script>
export default {
    props: {
        name: {
            type: String,
            default:''
        }
    }
}
</script>

<style scoped>

</style>

default 값을 꼭 정해주어야하며, style 태그에 scoped를 작성해주면 다른 컴포넌트에 미치지 않는 스타일을 작성할 수 있습니다.

그리고 App.vue에 방금 생성한 Color.vue 파일을 추가해줍니다.

 

App.vue파일 내용

<template>
    <ul>
        <Color
            v-for='color in colors'
            :key='color'
            :name='color'>
            {{ color }}
        </Color>
    </ul>
</template>

<script>
import Color from './components/Color.vue'

export default {
    components: {
        Color: Color
    },
    data() {
        return {
            colors: ['Red', 'Orange', 'Yellow']
        }
    }
}
</script>

import를 통해 파일을 불러와 준 후 componets에 Color을 추가해줍니다.

그러면, template의 html내용에서 컴포넌트를 사용할 수 있으며, props에 접근이 가능합니다.