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