Vue.js 조건문과 반복문

 

조건문

 

v- 으로 시작하는 속성을 디렉티브(Directive) 라고 부름

 

<!--  HTML(Vue) -->
<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
  
  <!-- v-if=조건 -->
  <div v-if="count > 4">
    4보다 큽니다
  </div>
</template>

 

반복문

 

<!--  HTML(Vue) -->
<template>
  <ul>
    <!-- v-for=조건(배열 데이터(fruits)를 데이터(fruit)에 1개씩 넣는다 -->
    <!-- :key=데이터, 데이터 고유한지 증명하기 위해 key속성 사용 -->
    <li    
     v-for="fruit in fruits" 
     :key="fruit">
      {{ fruit }}
    </li>
  </ul>
</template>

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

<!--  CSS(SCSS) -->
<style lang="scss">
  ul {
    li {
      font-size: 40px;
    }
  }
</style>

 

합쳐진 예제

 

<!-- App.vue -->
<!-- .vue 확장자를 가진 싱글 파일 컴포넌트 SFC (Single File Component) -->
<!-- template, script, style 3가지 태그로 구성 -->

<!--  HTML(Vue) -->
<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
  <div v-if="count > 4">
    4보다 큽니다
  </div>
  <ul>
    <li
     v-for="fruit in fruits" 
     :key="fruit">
      {{ fruit }}
    </li>
  </ul>
</template>

<!--  JS(Vue) -->
<script>
export default {
  // data: function() {}
  data() {
    return {
      count: 0,
      fruits: ['Apple', 'Banana', 'Cherry']
    }
  },
  methods: {
    increase() {
      this.count += 1
    }
  }
}
</script>

<!--  CSS(SCSS) -->
<style lang="scss">
  h1 {
    font-size: 50px;
    color: royalblue;
  }
  ul {
    li {
      font-size: 40px;
    }
  }
</style>

 

---

 

컴포넌트(components) 활용 예제

 

예제

- App.vue 내용을 컴포넌트를 활용하여 리팩토링

- components 내부에 Fruit.vue 생성

 

<!-- Fruit.vue -->
<template>
  <li> {{ name }} </li>
</template>

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

 

<!-- .vue 확장자를 가진 싱글 파일 컴포넌트 SFC (Single File Component) -->
<!-- template, script, style 3가지 태그로 구성 -->

<!--  HTML(Vue) -->
<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
  <div v-if="count > 4">
    4보다 큽니다
  </div>
  <ul>
    <Fruit
     v-for="fruit in fruits" 
     :key="fruit"
     :name="fruit">
      {{ fruit }}
    </Fruit>
  </ul>
</template>

<!--  JS(Vue) -->
<script>
import Fruit from '~/components/Fruit'
export default {
  components: {
    //Fruit: Fruit
    Fruit
  },
  // data: function() {}
  data() {
    return {
      count: 0,
      fruits: ['Apple', 'Banana', 'Cherry']
    }
  },
  methods: {
    increase() {
      this.count += 1
    }
  }
}
</script>

<!--  CSS(SCSS) -->
<style lang="scss">
  h1 {
    font-size: 50px;
    color: royalblue;
  }
  ul {
    li {
      font-size: 40px;
    }
  }
</style>