[Vue] Vue에서 조건문과 반복문 사용하기 (Conditional statements and loops)

조건문과 반복문

1. v-if="조건문"

조건문을 만족할때 (true일때) 해당 요소를 출력

 

2. v-for="데이터 in 배열"

배열에 있는 모든 데이터를 반복문을 돌려 순서대로 하나하나 출력

데이터를 하나씩 출력할때 고유한 key값을 해당 요소에 부여해줘야한다

key값을 가지고 있어야 Vue가 요소를 구별할 수 있게 되면서 최적화 작업을 해줄 수 있다

 

예제

<template>
  <h1>Conditional statements and loops</h1>
  <h2 @click="increase">{{ count }}</h2>
  <!-- 조건문 -->
  <div v-if="count > 4">4보다 큽니다!</div>
  <ul>
    <!-- 반복문 -->
    <!-- 반복문으로 데이터를 출력할때는 고유한 key 값을 각각의 데이터마다 부여해준다  -->
    <li v-for="fruit in fruits" :key="fruit">{{ fruit }}</li>
  </ul>
</template>

<script>
export default {
  name: 'ConditionalStatementsAndLoops',
  data() {
    return {
      count: 0,
      fruits: ['Apple', 'Banana', 'Cherry'],
    };
  },
  methods: {
    increase() {
      this.count += 1;
    },
  },
};
</script>

<style lang="scss" scoped>
ul {
  li {
    font-size: 20px;
  }
}
</style>

 

새로 배운 디렉티브 정리

• v-if="조건문": 조건문을 만족할때 (true일때) 해당 요소를 출력
• v-for="데이터 in 배열": 배열에 있는 모든 데이터를 반복문을 돌려 순서대로 하나하나 출력 (key값 필요)