[Vue.js] 8. 조건부 렌더링(V-if,v-show),리스트 렌더링(v-for)에 대한 심화 이해 및 예제

 해당 자료는 Vue 공식 홈페이지의 문서를 대부분 이용하고 있고 더 많은 정보를 참고하시려면

Vue 공식 홈페이지를 이용해주십시오 -> 바로가기 Vue 공식 홈페이지-배우기

 

 

 

조건부 렌더링

V-IF

지난번에 배웠던 v-if에 대해서 좀 더 심화된 부분을 중점으로 두겠습니다.

<div id="app">
  <h1 v-if="isTrue">  True</h1>
  <h1 v-else> False </h1>
</div>

new Vue({
  el: '#app',
  data: {
    isTrue: false,
  }
})

참고:https://jsfiddle.net/qudcks0703/y1zef7or/130/

v-if는 조건에 따라서 렌더링 되고 안되고를 표시한다고 배웠습니다.  추가로 v-else를 사용하게 되면 v-if가 true가 아닐 시에 렌더링됩니다. 

*v-if는 v-if가 true면 엘리멘트의 추가 / false면 엘리멘트가 삭제가 됨을 잊으시면 안됩니다.

*v-if는 true,false를 구분해주는 표현식도 가능합니다. ex)  a>4 , b==5

 

 

Vue 2.1.0+부턴 새로운 속성이 추가되었습니다.

<div id="app">
  <h1 v-if="a==1"> {{ a}}</h1>
  <h1 v-else-if="a==2">{{a}} </h1>
  <h1 v-else>{{a}} </h1>
</div>

new Vue({
  el: '#app',
  data: {
    a: 4,
  }
})

이처럼 v-else-if를 사용하면 추가적인 조건문을 만들 수 있습니다.

 

 

V-SHOW

<div id="app">
  <h1 v-show="isTrue">  True</h1>
</div>

new Vue({
  el: '#app',
  data: {
    isTrue: true,
  }
})

 참고:https://jsfiddle.net/qudcks0703/y1zef7or/135/

 

엘리먼트를 조건부로 표시하기 위한 또 다른 방법으론 v-show가 있습니다. v-if와 다른점은 v-show는 생성/삭제의

개념이 아님 display로 토글을 하기 때문에 엘리멘트가 항상 존재합니다.

*v-show는 template 구문을 지원하지 않으며, v-else를 함께 사용할 수 없습니다.

 

 

V-FOR

 

v-for도 마찬가지로 지난번보다 더 심화된 점을 중점으로 다루겠습니다.

 

<div id="app">
 <ul>
  <li v-for="(i, index) of items">
    {{ title }} - {{ index }} - {{ i.contents }}
  </li>
</ul>
</div>

new Vue({
  el: '#app',
  data: {
    title: 'title',
    items: [
      { contents: 'Apple' },
      { contents: 'Bird' }
    ]
  }
})

참고: https://jsfiddle.net/qudcks0703/y1zef7or/139/

v-for은 (변수,변수) in (데이터) 뿐만 아니라 in 대신 of를 사용하실 수 있습니다.

 

<div id="app">
 <ul>
  <li v-for="(key, value) of Information">
    {{ key }}  - {{ value}}
  </li>
</ul>
</div>

new Vue({
  el: '#app',
  data: {
    Information: {
    id:'bcchoi',
    pw:'1234',
    name:'최병찬',
    age:'27'
    } 
  }
})

참고:https://jsfiddle.net/qudcks0703/y1zef7or/143/

Vue 인스턴스의 data가 배열이 아닌 key,value일 경우 속성들도 반복하실 수 있습니다.

 

v-for은 이 외에도 파이썬 처럼 Range도 사용 가능하고 HTML 엘리먼트들도 반복 가능합니다.

// Range For
<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

// 엘리먼트 반복
<div>
  <span v-for="n in 10">
  	<button>button{{n}}<button> 
  </span>
</div>

 

 

 

 

★배열 변경 감지

 

 

※배열 변경 감지가 되는 방식

(이 부분은 정말 심화 학습을 필요로 하는 사람은 정말 꼭 알고 넘어가야할 부분이라고 생각합니다.) 

 

Vue는 감시중인 배열의 변이 메소드를 래핑하여 뷰 갱신을 트리거 합니다.

o push() , pop() , shift() , unshift() 

o splice() , sort() , reverse()

 

간단히 말하면, 배열의 메서드 중 위를 통한 값 갱신일 경우에만 반응한다는 것입니다.

 

 

※배열 변경  감지가 안되는 방식

new Vue({
  data: {
    alpha: ['a', 'b', 'c']
  }
})
this.alpha[1] = 'x' // 반응 하지 않음
this.alpha.length = 2 // 반응 하지 않음

 

반응 하지않는 다라는 말은 값이 변하더라도 HTML에 바인딩되어 있는 값이 변하지 않는 다는 말입니다. 

단) 값은 변해 있습니다.

 

 

만약 배열내에 원하는 인덱스의 값을 변경하고자 한다면 Vue 인스턴스 메서드를 사용하세요.

new Vue({
  data: {
    alpha: ['a', 'b', 'c']
  }
})

// 두개 동일함
this.set(this.item,1,'x');  // 반응함 
this.$set(this.item,1,'x'); // 반응함

// 또 다른 방법
this.alpha.splice(0,1,'x'); // 반응함

 

★맵 객체 변경 감지

 

※맵 객체 변경 감지가 안되는 방식

 

new Vue({
  data: {
    a: 1
  }
})

this.a=2;
// `this.a` 반응함

this.b = 2
// `this.b` 반응안함

위에서 같은 루트레벨에 있는 맵 타입 객체는 data로 선언되어 있는한 반응합니다.

 

하지만 아래처럼 다른 루트레벨 일 경우엔 그렇지 않습니다. 

new Vue({
  data: {
  	alpha:{
    	a:'에이',
        b:'비',
        c:'씨',
    }
  }
})

this.alpha.a='A'
// 반응하지않음

만약 맵 객체 타입의 다른 루트레벨 값이 변경했을때 반응하기 위해선 Vue 인스턴스 메서드를 사용하십시오.

 

this.set(this.alpha, 'a', 'A')
this.$set(this.alpha, 'a', 'A')

또는 여러개의 값을 변경해야 할 경우

Object.assign({}, this.userProfile, {
  a:'A',
  b:'비',
  c:'C',
})

///////////////////

this.alpha = Object.assign(this.userProfile, {
  a:'A',
  b:'비',
  c:'C',
})

* 새로운 반응형 속성 추가도 가능합니다.