[FrontEnd] Vue v-if, v-for

v-if

• 조건에 따라 블록을 렌더링

• v-if의 내용이 true일 때만 렌더링되어 화면에 출력

<h1 v-if="true">조건이 true일 때만 출력</h1>

• 여러 개의 조건을 달아 원할 때만 렌더링 가능

<div v-if="status == 'active'">
  <p>status가 active일 때 출력</p>
</div>
<div v-else-if="status == 'deactive'">
  <p>status가 deactive일 때 출력</p>
</div>
<div v-else>
  <p>위의 조건이 모두 거짓일 때 출력</p>
</div>

v-show

• v-if와 동일하나 v-show는 항상 렌더링 되고 dom에 남아있고, 조건에 따라 css의 display속성만 변경

<h1 v-show="true">조건이 true일 때만 출력</h1>

v-for

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

• 배열에서 모든 요소를 렌더링할 때까지 반복

<tr v-for="item in classList">
  <td>item.name</td>
  <td>item.num</td>
</tr>

<script>
export default {
	name: '..',
    data : function(){
      return {
        classList : [
          { name: 'vue', num: 22},
          { name: 'html', num: 33}
        ],
      };
    }
	...

• 결과

  vue 22
  html 33

• index 값을 출력 가능

<tr v-for="(item, index) in Items">
  <td>index</td>
  <td>item.name</td>
</tr>

• 결과

  0 vue
  1 html

• v-bind: 태그의 속성을 동적으로 변경 가능
  - key 속성에 index를 bind하여 최신 상태 유지

<tr v-for="Item in Items" v-bind:key="Item.index">
  <td>Item.Name</td>
  <td>Item.Address</td>
</tr>