zoukankan      html  css  js  c++  java
  • 460 动态组件

    <!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>
    
  • 相关阅读:
    JQuery 介绍
    转载:World class Software
    how to get domain user info from AD in C#
    抽象类与接口的实际应用{百分百的重点}
    设计模式学习笔记
    百度前端笔试面试7个试题
    虚函数在C#中的用法
    设计模式学习MVC实践
    VMware 创建私有网络试验室
    设计模式学习单件模式
  • 原文地址:https://www.cnblogs.com/jianjie/p/12825241.html
Copyright © 2011-2022 走看看