vue切換元件基礎模板

洛飞發表於2024-08-20
Vue元件

需求：登入註冊兩個按鈕，點選登入的時候登入顯示，點選註冊的時候註冊顯示，另外一個隱藏

如下圖所示先定義兩個template元件

    <template id="login">
        <div>
            <h2>使用者登入</h2>
            <p>
                使用者名稱：<input type="text" v-model="username">
            </p>
            <p>
                密&emsp;碼：<input type="password" v-model="userPwd">
            </p>
            <p>
                <button @click="toLogin">登&emsp;錄</button>
            </p>
        </div>
    </template>
    <template id="register">
        <div>
            <h2>使用者登入</h2>
            <p>
                使用者名稱：<input type="text" v-model="username">
            </p>
            <p>
                密&emsp;碼：<input type="password" v-model="userPwd">
            </p>
            <p>
                性&emsp;別：
                <label for="">
                    <input type="radio" name="sex" v-model="sex">男
                </label>
                <label for="">
                    <input type="radio" name="sex" v-model="sex">女
                </label>
            </p>
            <p>
                <button @click="toReg">注&emsp;冊</button>
            </p>
        </div>
    </template>

並且在各自的元件中進行初始化資料，

 <script>
        // 註冊元件的模板
        Vue.component('login', {
            template:'#login',
            data () {
                return {
                    username:'',
                    userPwd:''
                }
            },
            methods: {
                toLogin(){
                    console.log('要提交的登入資料'+this.username + this.userPwd);
                }
            }
        })

        Vue.component('register', {
            template:'#register',
            data () {
                return {
                    username:'',
                    userPwd:'',
                    sex:'',
                }
            },
            methods: {
                toReg(){
                    console.log('要提交的註冊資料'+this.username + this.userPwd);
                }
            }
        })
        let vm = new Vue({
            el : "#app",
            data : {
                flag:true,
            }
        })
    </script>

我們使用v-if 和else-if來進行控制兩個標籤的切換：

    <div id="app">
        <a @click.prevent="flag=true" href="">登入</a>  注意：這裡的prevent是阻止預設事件，如果不這樣子頁面會重新整理一下，有問題
        <a @click.prevent="flag=false" href="">註冊</a>
        <login v-if="flag"></login>
        <register v-else></register>
    </div>

利用component元素實現元件切換 暫不寫

<component :is="元件名稱"></component>

相關文章