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

조건문과 반복문

1. 조건문

1.1 코드 

<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
  <div v-if="count > 4">
    4보다 큽니다!
  </div>
</template>

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

숫자 클릭시 0 부터 1씩 증가하면서 4 보다 커지면 v-if 조건에 따라 div가 출력 되는 코드입니다.

1.2 v-if

<div v-if="count > 4">
    4보다 큽니다!
</div>

이는 1씩 증가하는 count 데이터가 4보다 크게 되면 4보다 큽니다! 라는 글자를 보이게 하는 조건문입니다. 이렇게 태그 옆에 조건문을 코딩할 수 있습니다.

v-로 시작하는 속성들을 디렉티브(directive)라 부릅니다.

 

2. 반복문

2.1 코드 

<template>
  <ul>
    <li v-for="fruit in fruits" :key="fruit">
      {{ fruit }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['Apple', 'Banana', 'Cherry']
    }
  }
}
</script>

2.2 v-for

<ul>
  <li v-for="fruit in fruits" :key="fruit">
    {{ fruit }}
  </li>
</ul>

이는 script 태그에서 명시한 배열 데이터인 fruits를 참고합니다. 태그에서 명시한 friut in fruits에서 배열 아이템의 개수만큼 {{ fruit }} 데이터를 순서대로 반복하여 출력합니다. 

덧붙여, 위와 같이 데이터를 반복할 때는 각각의 데이터가 고유한지를 증명해야 합니다. 이를 위해 key라는 속성을 : 콜론 기호와 함께 명시합니다. 이 부분에 고유하게 반복될 때마다 배열 데이터의 순서대로 입력될 수 있도록 제공하도록 합니다.

 

3. 컴포넌트 활용

위와 같이 직접 App.vue에 코딩을 하는 것도 가능하지만, 이번에는 components에 코딩하여 import하는 방법으로 똑같은 화면을 출력해보도록 하겠습니다.

3.1 components 폴더 내 파일 생성

components 폴더에 Fruit.vue 파일을 생성해줍니다.

3.2 Fruit.vue

//Fruit.vue
<template>
  <li>{{ name }}</li> // props의 name
</template>

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

<style scoped lang="scss"> // scoped는 현재 컴포넌트에 한해 스타일 적용하는 속성
  h1 { // scoped로 유효범위가 현재 Fruit 컴포넌트만이므로 적용이 되지 않음
    color: red !important;
  }
</style>

3.3 App.vue

//App.vue
<template>
<ul>
  <Fruit // components에 명시한 속성 이름 명시
    v-for="fruit in fruits"
    :key="fruit"
    :name="fruit"> // name 속성에 "fruit"
    {{ fruit }}
  </Fruit>
</ul>
</template>

<script>
import Fruit from '~/components/Fruit'

export default {
  components: {
    Fruit // Fruit: Fruit이나 속성과 데이터의 이름이 같다면 :뒤 생략 가능
  },
  data() {
    return {
      count: 0,
      fruits: ['Apple', 'Banana', 'Cherry']
    }
  }
}
</script>