JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.
기초지식은 다른 강의를 참조하도록 하라.
참고:
vue에서는 조건문을 사용할 수있다.
이는 뭐 특별한건 아니고 기존의 자바스크립트로도구현을 할 수있다.
단 html상에서 구현하는건 vue나 angular같은 프론트 엔드 렌더링 프레임워크가 아니면 없다는 것이다.
vue에서 이 조건문이 가능하므로써 jsp,jinja2,django,php등의 수많은 자체 렌더링 시스템을 쓰지 않아도 된다.
물론 vue를 알아가면 알아갈수록 이런 기능들의 불필요성을 더 크게 느끼게 될것이지만 말이다.
v-if : if 조건문
v-else-if : else if 조건문
v-else : else 조건문, 내용은 필요없음
v-show : if문처럼 true일때만 visible함
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<b v-if="isMan" @click="switchGender">man!</b>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'kukaro',
isMan: true,
},
methods: {
switchGender: function () {
this.isMan = !this.isMan;
}
}
});
</script>
</html>
vue에서의 조건문은 v-if를 사용한다.
이 태그가 붙어있다면 해당 태그내의 구문이 true일 경우 렌더링한다.
그렇지 않을 경우에 렌더링하지 않는다.
해당 b태그에서 클릭을 하면 switchGender로 인해 isMan이 false로 바뀌게 되므로 렌더링되지 않게된다.
여기서 v-if의 속성, 나아가서 v-else-if,v-else등에 들어갈 값은 굳이 변수가 아니라도 상관 없다.
수식이 들어가도되며 그 예시는 아래를 참조하라.
해당 구문이 true일경우 man이 정상적으로 클릭된다. 여기서 눌러보면 man이 사라지게될 것이다.
클릭했을경우 사라지게 됬다.
정상적이라면 if문이 있으면 else문이 존재해야한다.
elseif는 선택의 문제일지 몰라도 else문이 존재하지 않는 다는것은 어찌보면 어불성설에 가깝다.
따라서 당연히 vue도 else문이 존재한다.
사용방법은 아래와같다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<b v-if="isMan" @click="switchGender">man!</b>
<b v-else @click="switchGender">woman!</b>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'kukaro',
isMan: true,
},
methods: {
switchGender: function () {
this.isMan = !this.isMan;
}
}
});
</script>
</html>
else문에는 따로 조건을 적지 않는다. 속성을 그대로 둔다. 마치 readonly처럼 말이다.
이제 실행하여 테스트해보자.
클릭하면 바뀌게 된다. woman도 이벤트를 걸었으므로 누를때 마다 man과 woman이 바뀌게된다.
그리고 당연히 elseif도 존재한다. elseif문도 한번 보도록 하자.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<b v-if="isMan && age==26" @click="switchGender">kukaro!</b>
<b v-else-if="isMan" @click="switchGender">man!</b>
<b v-else @click="switchGender">woman!</b>
<br>
<button @click="addAge">나이를 먹는다!</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'kukaro',
age: 26,
isMan: true,
},
methods: {
switchGender: function () {
this.isMan = !this.isMan;
},
addAge: function () {
this.age++;
}
}
});
</script>
</html>
조건문에 else if를 사용하는데 좀더 구체적으로 사용하는 예시이다.
여기서 보면 버튼을 누를 때마다 나이가 증가하게된다.
남자면서 나이가 26살이면 kukaro를 출력하게되고 나이가 증가되면 조건이 틀려지므로 man이 출력,
또한 b태그를 클릭하면 성별이 바뀌게된다 한번 테스트를 해보아라.
이 까지는 평범한데 if문 처럼 사용할 수 있는 속성이 하나 더 있다.
바로 v-show이다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<b v-show="isMan" @click="switchGender">man!</b>
<b v-show="!isMan" @click="switchGender">woman!</b>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'kukaro',
isMan: true,
},
methods: {
switchGender: function () {
this.isMan = !this.isMan;
},
}
});
</script>
</html>
이를 시행시키면 마치 if문과 else문과같은 효과를 낸다.
언뜻보기에 둘은 같아보인다. 그러나 실상은 둘은 다르다.
근본적이게 파고들면 매우다르다. 엔드사용자 입장에서나 비슷하게 보일 뿐이다.
이는 if시리즈와 show문의 근본적인 렌더링 방식의 차이에서 기인한다.
if시리즈(if문,else문,else-if문) : 렌더링을 하지 않는다.
show문 : 렌더링을 하지만 visible을 false로한다.
보다시피 렌더링은 됬지만 css로 display를 끈것을 확인할 수있다.
'Programming > JavaScript-Vue' 카테고리의 다른 글
| [Vue-07]배열(Array) 및 연관배열(Object) 사용시 주의 사항 (2) | 2018.02.20 |
|---|---|
| [Vue-06]반복문(v-for) (0) | 2018.02.20 |
| [Vue-04]데이터 바인딩 (0) | 2018.02.20 |
| [Vue-03]라이프 사이클-기본 (0) | 2018.02.20 |
| [Vue-02]메소드 (0) | 2018.02.18 |