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

最新推荐文章于 2022-03-05 20:11:40 发布

weixin_30325487

最新推荐文章于 2022-03-05 20:11:40 发布

阅读量105

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/songsongblue/p/10998402.html

版权

 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     <!--1.导入Vue的包-->
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       <!-- Vue提供了 component ，来展示对应名称的组件 -->
18       <!-- component 是一个占位符，:is 属性，可以用来指定要展示的组件的名称 -->
19       <component :is="comName"></component>
20 
21       <!-- 总结：当前学习了几个Vue提供的标签了？？？ -->
22       <!-- component,template,transition,transitionGroup -->
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

weixin_30325487

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第六章组件 59 组件切换-使用Vue提供的component元素实现组件切换

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....
复制链接

扫一扫