search

v-show

hashtag
v-show

v-show는 태그의 표시 여부를 동적으로 설정할 수 있는 Vue Directive이다. 태그의 생성과는 무관하며, 단지 표시 여부만 결정한다.

hashtag
사용 예제 - 자기소개서 문항 작성

<!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글자를 기준으로 하단의 경고 문구 또는 버튼의 표시 여부가 달라진다는 것을 확인할 수 있다.

PreviouspreventNextv-if

Last updated