홈페이지 유튜브

v-if

v-if

v-if는 태그의 생성 여부를 동적으로 설정할 수 있는 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;
        }
        #app {
            position:fixed;
            left:50%;
            transform:translate(-50%, 0%);
            margin-top: 30px;
            width:300px;
        }
        #app input,
        #app button {
            width:100%;
            padding:10px;
            margin:10px 0px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>VueJS v-if example</h2>
        <div>
            <h3>회원 가입 1단계 : 아이디 입력</h3>
            <input type="text" v-model="member.id">
        </div>
        <div v-if="level1">
            <h3>회원 가입 2단계 : 닉네임 입력</h3>
            <input type="text" v-model="member.nickname">
        </div>
        <div v-if="level2">
            <h3>회원 가입 3단계 : 이메일 입력</h3>
            <input type="text" v-model="member.email">
        </div>
        <button v-if="level3">
            제출하기
        </button>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    member:{
                        id:"",
                        nickname:"",
                        email:"",
                    },
                };
            },
            computed:{
                level1(){//아이디만 입력된 상태
                    return this.member.id.length > 0;
                },
                level2(){//아이디+닉네임이 입력된 상태
                    return this.level1 && this.member.nickname.length > 0;
                },
                level3(){//아이디+닉네임+이메일이 모두 입력된 상태
                    return this.level2 && this.member.email.length > 0;
                },
            },
        });
        app.mount("#app");
    </script>
</body>
</html>

위의 예제를 실행하면 각각의 단계가 충족될 경우만 다음 단계의 내용이 생성되는 것을 확인할 수 있다. 개발자 도구를 열어보면 태그 자체가 생성되는 것을 확인할 수 있는데, 이는 강제 조작을 통한 폼 데이터의 전송을 방지할 수 있다.

만약 v-show로 화면을 구성하였다면 사용자가 의도적으로 개발자 도구 등을 통하여 전송 버튼을 강제로 누를 수도 있을 것이다.

Previousv-showNextv-for

Last updated