Vue,组件切换-方式2

Vue,组件切换-方式2

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="../js/vue.js"></script>
 9 </head>
10 <body>
11     <div id="app">
12 
13         <a href="" @click.prevent="comName='login'">登录</a>
14         <a href="" @click.prevent="comName='register'">注册</a>
15 
16         <!-- Vue 提供了 component 元素, 来展示对应名称的组件 -->
17         <!-- component 是一个占位符, :is 属性,可以用指定要展示的组件的名称 -->
18         <!-- 正常的 "" 里面是表达式, 而组件名是 字符串, 要在 "" 里加 '' -->
19         <!-- <component :is="'login'"></component> -->
20 
21         <!-- 我们将 :is 里设为一个 comName 的变量  -->
22         <component :is="comName"></component>
23 
24         <!-- 总结: 当前学习了几个 Vue 提供的标签了 ??? -->
25         <!-- component,  template,  transition,  transitionGroup -->
26     </div>
27 
28           
29 
30 </body>
31 </html>
32 <script>
33 
34     //组件名称是 字符串
35     Vue.component('login', {
36         template: '<h3>登录组件</h3>'
37     })
38 
39     Vue.component('register', {
40         template: '<h3>注册组件</h3>'
41     })
42 
43     var vm = new Vue({
44         el: '#app',
45         data:{
46             comName: '' // 当前 component 中的 :is 绑定的组件的名称
47         },
48         methods: {
49             
50         },
51     })
52 
53 </script>

效果图

原文地址:https://www.cnblogs.com/wo1ow1ow1/p/11138975.html