[Vue基础实战]组件切换-1

参考代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件切换1</title>   
</head>
<body>    
    <div id="app">
     <a href="" @click.prevent="flag=true">登录</a>
     <a href="" @click.prevent="flag=false">注册</a>
     <login v-if="flag"></login>
     <register v-else="flag"></register>
    </div>
    <script src="../js/vue.js"></script>
    <script id="tmp1" type="x-template">
        <div>
            <h3>登录</h3>          
        </div>      
    </script>    
    <script>
        Vue.component('login',{
            template:'#tmp1'           
        });
        Vue.component('register',{
            template:'<h3>注册</h3>'           
            });
        const app = new Vue({
            el: '#app',
            data:{
                flag:true
            }
            }   
       );
    </script>
</body>
</html>

 

posted @ 2021-01-14 17:57  dshow  阅读(63)  评论(0)  编辑  收藏  举报