조건문과 반복문

조건문 예제

<h1 @click="increase">
    {{ count }}
  </h1>
  
    <!-- 비교 연산자 -->
    <div v-if="count > 4">
      4보다 큽니다!
    </div>

v-if 속성을 이용하여 조건을 지정하여 true일경우 해당 영역의 내용을 출력할 수 있다.

 

반복문 예제

v-for 속성을 이용하여 fruits 배열의 데이터를 fruit로 가져오고

:key 속성을 이용하여 값이 고유한지 체크

중괄호 2개를 붙여서 내용을 출력한다.

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

<script>
export default {
  data: function () {
    return {
      // count 변수에 0을 대입
      count: 0,
      fruits: ['Apple', 'Banana', 'Cherry']
    };
  },
  // 함수 선언
  methods: {
    increase() {
      // 함수가 실행될때마다 1씩 증가
      this.count += 1;
    },
  },
};
</script>

// SCSS로 선언
<style lang="scss">
h1 {
  font-size: 50px;
  color: royalblue;
}
ul {
  li {
    font-size: 40px;
  }
}
</style>

 

외부에서 component를 가져와서 사용하는 예제

component 파일을 생성

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

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

<style lang="scss" scoped>
h1 {
  color: red !important;
  
}
</style>

App.vue

// 스크립트 선언 부분에 경로지정하여 가져올 수 있도록 설정
<script>
import Fruit from '~/components/Fruits.vue'
export default {
  components: {
    hello: Fruit
  },

 

확인