디렉티브
v-show
v-if
v-else
v-show - 엘리먼트 속성이 충족되었을때 보여준다.
<html>
<body>
<div id = "app">
<h1>Text123</h1>
<textarea v-model="message"></textarea>
<!--
<button v-show="message"> send </button>
-->
<button v-show="message"> send </button>
<pre>
{{$data}}
</pre>
</div>
</body>
<!--<script src="http://code.jquery.com/jquery-latest.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: '#app',
data: {
message: '테스트입니다 v-show'
}
})
</script>
</html>
글자를 한글자도 쓰면
v-if v-show 대신 사용할수있음
<html>
<body>
<div id = "app">
<h1>Text123</h1>
<textarea v-model="message"></textarea>
<!--
<button v-show="message"> send </button>
-->
<button v-if="message"> send </button>
<pre>
{{$data}}
</pre>
</div>
</body>
<!--<script src="http://code.jquery.com/jquery-latest.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: '#app',
data: {
message: '테스트입니다 v-if'
}
})
</script>
</html>
같은역활이지만
v-if는 template를 사용할수있따 v-show는 사용불가능
<html>
<body>
<div id = "app">
<template v-if="!message">
<h1> v-if template test</h1>
</template>
<textarea v-model="message"></textarea>
<button v-show="message"> send </button>
<pre>
{{$data}}
</pre>
<!--
<h1>Text123</h1>
<textarea v-model="message"></textarea>
<button v-show="message"> send </button>
<button v-if="message"> send </button>
<pre>
{{$data}}
</pre>
-->
</div>
</body>
<!--<script src="http://code.jquery.com/jquery-latest.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: '#app',
data: {
message: '테스트입니다 v-if'
}
})
</script>
</html>
코드에서보면 <template 에 message가 ! 없다면 이라고 되어있다
따라서 메시지가 null일경우에는 보여지고
메시지가 1글자라도있으면 버튼이 생기면서
문구는 사라질것이다
v-else
<html>
<body>
<div id = "app">
<h1 v-if="!message"> v-if test</h1>
<h2 v-else> v-else test </h2>
</template>
<textarea v-model="message"></textarea>
<button v-show="message"> send </button>
<pre>
{{$data}}
</pre>
<!--
<h1>Text123</h1>
<textarea v-model="message"></textarea>
<button v-show="message"> send </button>
<button v-if="message"> send </button>
<pre>
{{$data}}
</pre>
-->
</div>
</body>
<!--<script src="http://code.jquery.com/jquery-latest.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: '#app',
data: {
message: '테스트입니다 v-if'
}
})
</script>
</html>
코드상으로는 message가 없으면 v-if
있으면 else문이 동작되게 해놨씁니다
단독으로 사용했을때 v-show와 v-if의 차이점은?
설명으로는 v-show가 랜더링에 더 많은 리소스를 소모한다고 한다.
따라서 가이드에 따르면 v-if이 진정한 조건부 렌더링이라 한다.