[Vue3시작하기] v-if, v-show

v-if 데이터 변화에 따른 화면 변화

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>


<div id="app">
    <p v-if="login">로그인 되었습니다.</p>
    <p v-else>로그인 하세요</p>
    <button>로그인</button>

</div>

<script>
    Vue.createApp({
        data() {
            return {
                login: false
            }
        }
    }).mount('#app');
</script>

 

v-on 으로 이벤트 제어

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>


<div id="app">
    <p v-if="login">로그인 되었습니다.</p>
    <p v-else>로그인 하세요</p>
    <button v-on:click="loginUser">로그인</button>

</div>

<script>
    Vue.createApp({
        data() {
            return {
                login: false
            }
        },
        methods: {
            loginUser() {
                this.login = !this.login;
            }
        },
    }).mount('#app');
</script>

v-show  display : none 을 넣다 뺐다 해준다.

 

 

 

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>


<div id="app">
    <p v-if="login">로그인 되었습니다.</p>
    <p v-else>로그인 하세요</p>
    <button v-on:click="loginUser">로그인</button>

    <hr>
    <p v-show="login">로그인 하세요</p>
    <button v-on:click="loginUser">로그인</button>
</div>

<script>
    Vue.createApp({
        data() {
            return {
                login: false

            }
        },
        methods: {
            loginUser() {
                this.login = !this.login;
            }
        },
    }).mount('#app');
</script>