vue实现组件切换的两种方式

DOCTYPE html>
<html>
    <head>
        <title>组件的切换title>
        <meta charset="utf-8">
    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>
        
        <div id="app2">
                <a href="" @click.prevent="comName=login">登录a>
                <a href="" @click.prevent="comName=register">注册a>
            
            
            <component :is="comName">component>
        div>
    body>
    <script src="node_modules\vue\dist\vue.js">script>
    <script>
        Vue.component("login",{
            template:"

登录组件

" }) Vue.component("register",{ template:"

注册组件

" }) let vm = new Vue({ el:"#app", data:{ flag:false } }); let vm2 = new Vue({ el:"#app2", data:{ comName:"login" } }) script> html>

 

你可能感兴趣的:(vue实现组件切换的两种方式)