Vue.js - 조건문

조건문을 만들어 조건대로 함수를 수행할 수 있다.

v-if

프로그램의 언어마다 조건문을 사용할 수 있다. vue.js에서는 v-if를 사용하여 조건문을 수행할 수 있다. 조건문이 들어맞을 경우에만 프론트엔드에 렌더링 할 수 있다.

밑의 코드에서는 if, else if, else문을 Vue.js에서 수행한 것이다.

<div> id = "app">
	<template v-if = "show">
    //넣어줄 값.(스프링에서 가져온 값을 new Vue의 데이터에 할당하고, 수행해야함.
    //하지만 이 페이지에서는 대략적인 모습을 출력해줄 것임.
		<div>1</div>
        <div>2</div>
        <div>3</div>
    </template>
    <div v-else-if="조건식">조건식에 해당했을 때 보여주고 싶은 값</div>
    <div v-else>조건식이 아무것도 맞지 않았을 경우 나타내는 값.</div>
</div>

<script>


new Vue({
	el:'#app',
    data:{
    	show:false;
        map:{
        	값1:(스프링에서 가져온 값)
        }
    }
    methods:{
    	showTest(){
        	if(map.값1 != null)
	        	this.show = true;
        }
    }
});


</script>

• template를 통해서 여러 요소를 한꺼번에 표현할 수 있다.
• <template v-if ="데이터">를 사용하여 화면에 렌더링이 가능하다.
• 조건에 부합하지 않는 경우 false일때 DOM에서 사라진다.

v-show

• v-if와 비슷하지만 else-if와 같이 사용하지 않으며 토글 형식에 이용되는 방식이다.
• 첫 렌더링을 할 때의 자원비용이 많이 소모된다.

<div> id = "app">
	<template v-show>
    	<div>1</div>
        <div>2</div>
    </template>
    <button @onclick=showTest>showTest</button>
</div>

<script>


new Vue({
	el:'#app',
    data:{
    	show:false;
    }
    methods:{
    	showTest(){
	        	this.show = true;
        }
    }
});


</script>

• v-if와 마찬가지로 데이터를 이용한다.
• v-show를 사용하면 렌더링은 이루어지지만 조건에 맞지 않는 경우 display:none 형식으로 화면에 보이지 않게 된다.