.png)
v-if 함수
v-if는 안보이던것이 true가 되면 보이는게 아니고, 없던것이 true가 되면 렌더링되어 생성되는 개념이다.
참고) v-show가 css를 통해 숨겨져있는 상태에서 true가 되면 보이게 되며, v-if보다는 속도가 빠르다.
<!-- body만 작성 -->
<body>
<!-- html 영역 -->
<div id="app">
<!-- seen이 true이면 보이고 false이면 안보인다. -->
<p v-if = "seen">보이시죠?</p>
<!-- 안보였다가 보이게 -->
<button v-on:click = "SHOW">보기</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<!-- JS 영역 -->
<script>
const app = new Vue({
el : "#app",
data:{
seen :false
},
methods:{
SHOW(){
this.seen = true;
}
}
});
</script>
</body>| seen이 true인 경우 | seen이 false인 경우 |
|---|---|
 |  |
v-if 조건 및 다중 조건
조건 넣기
v-if = "sum > 10" 이렇게 조건을 넣어줄 수 있다. sum > 10이 넘는 것만 뽑아낸다!
다중 조건 넣기
v-if = "sum >10 && sum <30"10 < sum < 30 인것만 뽑아내겠다 라는 의미이다.
AND : &&
OR : ||
v-else-if / v-else
<!-- body만 작성 -->
<body>
<!-- html 영역 -->
<div id="app">
<p v-if="renderA">A가 보입니다.</p>
<!-- v-if가 true 아닐때 else-if 실행 -->
<p v-else-if="renderB">B가 보입니다.</p>
<p v-else>둘 다 안보입니다.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<!-- JS 영역 -->
<script>
const app = new Vue({
el : "#app",
data: {
renderA : true,
renderB: false,
}
});
</script>
</body>| A가 true, B가 false | A가 false, B가 true | A와 B 둘다 false |
|---|---|---|
 |  |  |
true와 false를 사용할 때, boolean 값만 사용하는게 아닌 1 과 0도 사용할 수 있다.
v-for
v-for을 쓸 때에는 key값을 넣어주는 편이 좋다.
<!-- body만 작성 -->
<body>
<!-- html 영역 -->
<div id="app">
<!-- todos 배열안의 객체를 todo라고 지정하고 객체의 text를 for문 돌리기! -->
<li v-for="todo in todos" v-bind:key = "todo.id">{{ todo.text }}</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<!-- JS 영역 -->
<script>
const app = new Vue({
el: "#app",
data:{
todos: [
{
id : 1,
text : "JS 배우기"
},
{
id:2,
text : "Vue 배우기"
},
{
id:3,
text : "C++ 배우기"
}
]
}
});
</script>
</body>결과
v-for와 v-if를 같이 사용하고 싶을 때
다음과 같이 작성하면 warning 문구가 발생한다.
<li v-if = "boolean" v-for="todo in todos" v-bind:key = "todo.id">{{ todo.text }}</li>즉, 같은 태그 안에 if와 for을 쓰면 warning!!
따라서, 다음과 같이 작성해줘야 한다.
<div v-if = "boolean">
<li v-for="todo in todos" v-bind:key = "todo.id">{{ todo.text }}</li>
</div>
혹은
<div v-for="todo in todos" v-bind:key = "todo.id">
<li v-if = "boolean">{{ todo.text }}</li>
</div>
여러 방향으로 접근하는 개발자