第六章组件 59 组件切换-使用Vue提供的component元素实现组件切换

约定不等于承诺〃 2021-11-04 11:40 255阅读 0赞

1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4   <head>
     5     <meta charset="utf-8">
     6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     7     <meta http-equiv="X-UA-Compatible"  content="ie=edge">
     8     <title>Document</title>
     9     
    10     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>   
    11   </head>
    12 
    13   <body>
    14       <div id="app">
    15       <a href="" @click.prevent="comName='login'">登录</a>
    16       <a href="" @click.prevent="comName='register'">注册</a>
    17       
    18       
    19       <component :is="comName"></component>
    20 
    21       
    22       
    23       </div>
    24 
    25       <script>
    26       //组件名称是 字符串
    27       Vue.component('login',{
    28         template:'<h3>登录组件</h3>'
    29       })
    30 
    31         Vue.component('register',{
    32         template:'<h3>注册组件</h3>'
    33       })
    34 
    35           //创建 Vue 实例，得到 ViewModel
    36           var vm =  new Vue({
    37               el:'#app',
    38         data:{
    39           comName:'login'//当前 component 中的 :is 绑定的组件的名称
    40         },
    41         methods:{}
    42           });
    43       </script>
    44   </body>
    45 </html>

转载于:https://www.cnblogs.com/songsongblue/p/10998402.html