[vue] v-if, v-else, v-show (ft. v-if와 v-show 차이점)

 

vue.js에서 v-if를 이용한

조건부 렌더링을 알아보겠습니다. 

 

v-if

v-if와 v-else는 자바스크립트의 조건문 if, else if와 같은 의미입니다. 
조건이 성립하지 않으면 렌더링 자체를 하지 않아 태그 자체가 비어있습니다. 

<div v-if="true">True</div>
<div v-if="false">False</div>
//결과: True

 

v-else

v-else는 v-if 와 함께 이용할 수 있습니다. 
앞의 조건이 성립하지 않는다면 else 조건이 동작합니다.

 

예제) button을 이용하여 form을 조건부 렌더링

· add item 버튼 클릭 시 form 출력
· cancel 버튼 클릭시 form 사라짐

<div id="app">
  <h1>{{ header.toLocaleUpperCase() }}
  <!------------------button------------------>
    <button v-if="state === 'default'" @click="chageState('edit')">add item</button>
    <button v-else @click="chageState('default')">cancel</button>
  </h1>
  <!------------------form-------------------->
  <form v-if="state === 'edit'" @submit.prevent="addFn()">
    <input v-model="addItem" ref="addItem" />
    <button>add</button>
  </form>
  <div v-for="item in items" :class="[ item.purchased? 'done' : '' ]" @click="toggleFn(item)">
   {{ item.subject }}
  </div>
</div>

< script >
  var app = new Vue({
      el: '#app',
      data: {
        header: 'To buy list',
        //1. state라는 property, 초기 상태 default로 설정
        state: 'default',
        items: [{
            subject: '10 pens',
            purchased: false,
            status: true,

          },
          {
            subject: '20 bags',
            purchased: true,
            status: false,
          },
          {
            subject: '5 coffee',
            purchased: false,
            status: true,
          },
          {
            subject: '8 towels',
            purchased: true,
            status: false,
          },
        ],
        addItem: '',
      },
      methods: {
        toggleFn(item) {
          item.purchased = !item.purchased
        },
        addFn() {
          this.items.push({
            subject: this.addItem,
            purcahsed: false,
            status: false
          });
          this.addItem = '';
          this.$refs.addItem.focus();
        },
        //2. toggle 기능을 위해 changeState methods 삽입
        //매개변수를 이용하여 edit 전달
        //state를 edit로 변경
        chageState(newState) {
          this.state = newState;
        }
      }
  }) 
</script>

 

화면 결과

 

콘솔화면(v-if, v-else)

 

v-show

v-if 와 결과는 같지만 동작하는 방식이 다릅니다. v-if와 결과는 같지만 동작하는 방식이 다릅니다.
조건이 성립하지 않을 경우 렌더링은 하되 인라인 스타일 방식으로 display: none 처리를 합니다. 

<div v-show="true">True</div>
<div v-show="false">False</div>
//결과: True

 

 

v-if와 v-show 차이점

v-if 의 경우 조건이 성립하지 않을 경우 태그 자체를 렌더링 하지 않지만, 
v-show는 렌더링은 하되 style을 display: none 처리를 합니다.

저의 경우에는 둘 중에 불필요한 렌더링을 하지 않는 
v-if를 위주로 사용하고 있습니다.

비교

<div v-if="true">True</div>
<div v-if="false">False</div>
//결과: True

<div v-show="true">True</div>
<div v-show="false">False</div>
//결과: True

v-if와 v-show의 콘솔 비교

 

toLocaleUpperCase()

string을 대문자로 변환합니다. 

 

toLocaleLowerCase();

string을 소문자로 변환 합니다. 

 

v-on:submit.prevent

form 태그는 submit과 동시에 새로고침 되는 성격을 갖고 있습니다.
새로고침을 없애기 위하여 자바스크립트에서는 event.preventDefault()를 호출하고,
vue.js에서는 v-on 이벤트 리스너에서 .prevent를 사용합니다.  

<form v-on:submit.prevent></form>

 

$refs.ref 속성 이름.focus()

자바스크립트의 focus()를 vue에서 사용하는 방법은
태그에 ref="속성 이름" 삽입하면, 
해당 태그에 바로 접근이 가능합니다. 

this.$refs.속성 이름.focus(); //methods 함수에 삽입