v-show
v-show
v-show는 태그의 표시 여부를 동적으로 설정할 수 있는 Vue Directive이다. 태그의 생성과는 무관하며, 단지 표시 여부만 결정한다.
사용 예제 - 자기소개서 문항 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Directive Example</title>
<style>
* {
box-sizing: border-box;
}
.user-input {
width:300px;
resize: none;
}
.warning {
color:red;
}
</style>
</head>
<body>
<div id="app">
<h2>VueJS bind style example</h2>
<h3>Q : 성격의 장/단점에 대해 기술하세요.</h3>
<textarea class="user-input" v-model="content" v-on:input="content = $event.target.value"></textarea>
<div v-bind:class="{warning : isOverflow}">({{contentLength}} / 100)</div>
<div v-show="isOverflow">
최대 1000글자까지만 작성하실 수 있습니다.
</div>
<button v-show="isButtonVisible">
제출하기
</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data(){
return {
content:"",
};
},
computed:{
contentLength(){
return this.content.length;
},
isEmpty(){
return this.contentLength == 0;
},
isOverflow(){
return this.contentLength > 100;
},
isButtonVisible(){
return !this.isEmpty && !this.isOverflow;
},
},
});
app.mount("#app");
</script>
</body>
</html>실행하면 textarea에 입력한 값에 따라 글자수가 변화하고, 100글자를 기준으로 하단의 경고 문구 또는 버튼의 표시 여부가 달라진다는 것을 확인할 수 있다.
Last updated