实现多个组件的切换

 

利用component 实现组件展示
<component :is=" 'login' "></component>   双引号中加单引号
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <script src="./public/lib/vue/dist/vue.js"></script>
 8 </head>
 9 
10 <body>
11 
12     <div id="app">
13         <a href="" @click.prevent="comname= 'login'">login</a>
14         <a href="" @click.prevent="comname = 'regis'">regis</a>
15         <a href="" @click.prevent="comname = 'new'">new</a>
16         <component :is="comname"></component>
17     </div>
18     <script>
19         Vue.component('login', {
20             template: '<h3>login</h3>'
21         })
22         Vue.component('regis', {
23             template: '<h3>regis</h3>'
24         })
25         Vue.component('new', {
26             template: '<h3>new</h3>'
27         })
28         var app = new Vue({
29             el: '#app',
30             data: {
31                 comname: 'regis'
32             },
33             methods: {
34 
35             },
36 
37         })
38     </script>
39 </body>

 

 
posted @ 2019-09-12 09:18  normalboy(NB)  阅读(179)  评论(0)    收藏  举报