2021-11-23 (Vue.js - 템플릿 문법(3))

v-if, v-show, v-for를 사용해보자

1. v-if, v-show의 공통점

 - 조건에 따라 블록을 렌더링할 때 사용

 - 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링

2. v-if, v-show의 차이점

 - v-show를 쓴 엘리먼트의 경우, 항상 렌더링되어 DOM에 남아 있음

 - v-show는 엘리먼트의 CSS의 display 속성만을 전환

 - v-show는 <template>엘리먼트 지원X

3. v-if의 조건부 그룹

 - 배열을 기반으로 리스트를 렌더링

 - item in items 형태로 특별한 문법이 필요(items는 원본 데이터 배열, item은 반복되는 배열 엘리먼트의 별칭)

3. v-for

 - 

<template>
  <!-- v-if -->
  <div>
    <h2>당신의 나이는 {{age}}입니다</h2>
    <h3 v-if="age > 18">당신은 어른입니다.</h3>
    <h3 v-else-if="age > 13 && age<= 18">당신은 청소년입니다</h3>
    <h3 v-else>당신은 어른이 아닙니다.</h3>
  </div>
  <!-- v-show -->
  <div>
    <h2 v-if="display">(v-if)보입니다!!</h2>
    <h2 v-show="display">(v-show)보입니다!!</h2>
  </div>
  <!-- v-for -->
  <div>
  <h2 v-for="(animal, index) in animals" :key="index">{{animal}} 인텍스는 :: {{index}} </h2>
  <ul>
    <li v-for="(user, index) in users" :key="index">
      이름은 {{user.name}} 직업은 {{user.job}}
      <p v-for="item in user.skill" :key="item">{{item}}</p>
    </li>
  </ul>
  </div>
   <!-- 조건부 렌더링 -->
   <div>
   <template v-for="(animal, index) in animals" :key="index">
     <h2 v-if="animal !== 'monkey'">{{animal}} 인텍스는 :: {{index}}</h2>
   </template>
   </div>
</template>

<script>


export default {
  name: 'App',
  data(){
    return {
      age: 14,
      display: false,
      animals: ["monkey", "rat", "dog","lion"],
      users: [
        {name: 'scalper', job:'devleoper', gender:'male', skill:["html", "css", "javascript"]},
        {name: 'john', job:'designer', gender:'male', skill:["html", "css", "javascript"]},
        {name: 'chulsu', job:'pm', gender:'female', skill:["html", "css", "javascript"]}
      ]
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
input {
  font-size: 20px;
}
</style>

결과화면

 1. v-if

 

2. v-show(개발자 도구로 확인)

 

3. v-for

 

4. 조건부 렌더링(그룹)

참고

https://v3.ko.vuejs.org/guide/conditional.html#v-else

https://kr.vuejs.org/v2/guide/list.html

https://www.youtube.com/watch?v=ibYCwlEmILI&list=PLpJDjPqxGWGrkyxxavs2oW-SK3v_8VLwa&index=4