<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <button @click="chooseContent(1)">首页</button> <button @click="chooseContent(2)">列表</button> <button @click="chooseContent(3)">新闻</button> <button @click="chooseContent(4)">个人</button> <div id="content"> <!-- 组件会在 `com` 改变时改变 --> <component :is="com"></component> </div> </div> <script type="text/x-template" id="laochen"> <div> <h1>首页内容</h1> <p>Hello hello hello vue</p> </div> </script> <script type="text/javascript"> let com1 = Vue.component("index-com", { name: 'index', template: '#laochen' }) let com2 = Vue.component("list-com", { template: '<div><h1>列表内容</h1><p></p></div>' }) let com3 = Vue.component("news-com", { template: '<h1>新闻内容</h1>' }) let com4 = Vue.component("me-com", { template: '<h1>个人中心内容</h1>' }) let app = new Vue({ el: "#app", data: { com: com1 }, methods: { chooseContent: function (id) { console.log(id) console.log(this) //通过获取id,选择注册好的组件 this.com = this.$options.components['com' + id] } }, components: { com1, com2, com3, com4 } }) </script> </body> </html>
460 动态组件
转载文章标签 html javascript vue.js 文章分类 JavaScript 前端开发
-
VUE动态加载不同组件
VUE动态加载不同组件
用户登录 属性值 加载 -
【Vue】动态组件和异步组件
动态组件和异步组件
vue.js 前端 javascript 数据 缓存 -
Leetcode 441~460
443. 压缩字符串
leetcode 算法 职场和发展 List 数组