Vue JS - Conditional Render

Conditional Rendering

• v-if 를 사용해 렌더링 조건을 적을수 있다.

<p v-if="goals.lenfth === 0">No goals have been added yet - please start adding some!</p>

• goals 배열의 길이가 0일때만 렌더링하게 설정한 예시

v-if

• true/false 를 가지는 어떤것도 들어갈수 있다.
• v-if 바로 밑에 v-else를 사용할수 있다.

<p v-if="goals.length === 0">No goals have been added yet - please start adding some!</p>
      <ul v-else>
        <li>Goal</li>
      </ul>

• v-if가 아닐시 v-else 가 렌더링 된다.
• v-if 뒤엔 v-else-if 도 사용 가능하다.

v-show

• v-else / v-else-if 사용 불가능하다.
• v-if 와 같이 조건을 사용한다.
• DOM에서 아예 사라지는게 아닌 display:none 을 통해 렌더링 여부를 결정하게 된다.
  • 렌더 트리에선 사라지게 된다.
• DOM의 변경이 없어 성능상의 이점이 있다.

---

데이터 리스트 렌더링

• v-for 을 사용한다.

	<ul v-else>
        <li v-for="goal in goals">{{ goal }}</li>
    </ul>

• goals 배열의 값을 goal로 가져와 사용하겠다는 것.

index 가져오기

<li v-for="(goal, index) in goals">{{ goal }}</li>

• 괄호로 묶어 index를 가져올수 있다.

<li v-for="(value, key, index) in {name: 'test', age: 'key'}">{{key}}:{{value}}</li>

• 이는 객체를 v-for로 가져올때도 사용 가능하다.

<li v-for="num in 10">{{num}}</li>

• 숫자를 적어 1~10까지 나오게 할수도 있다.

Key

• 반복되는 요소의 구별을 위해 사용한다.
• 삭제, 업데이트시 중요한 역할을 한다.

<li @click="removeGoal(index)" :key="goal" v-for="(goal, index) in goals">{{index + 1}}. {{ goal }}</li>

• key를 사용해 각각의 요소마다 unique하게 가지는 값을 넣는다.