해당 자료는 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',
})
* 새로운 반응형 속성 추가도 가능합니다.
[Vue.js] 7. HTML 클래스,스타일 바인딩에 대한 이해와 예제 (0) | 2020.07.16 |
---|---|
[Vue.js] 6. computed 와 watch에 대한 이해와 예제 (0) | 2020.07.16 |
[Vue.js] 5. 템플릿 문법 그리고 v-속성에 대한 이해와 예제 (0) | 2020.07.16 |
[Vue.js] 4. Vue 인스턴스 라이프사이클(생명주기) (0) | 2020.07.15 |
[Vue.js] 3. Vue 인스턴스의 속성과 메소드 그리고 기초 (0) | 2020.07.15 |
댓글 영역