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>
效果图
