vue component :实现加载动态组件

Myth丶恋晨 2023-02-15 12:51 119阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue Component 标签</title>
        <script type="text/javascript" src="../assets/js/vue.js"></script>
    </head>
    <body>
    <h1>Vue Component 标签</h1>
    <hr>
    <div id="app">
       <component v-bind:is="who"></component>
        <button @click="changeComponent">我变换</button>
    </div>
    </body>
    </html>
    <script>
        var componentA={
            template:`<div style="color:red">我是 componentA</div>`
        }
        var componentB={
            template:`<div style="color:green">我是 componentB</div>`
        }
        var componentC={
            template:`<div style="color:rebeccapurple">我是 componentC</div>`
        }
        var app = new Vue({
            el:'#app',
            data:{
                who:'componentA'
            },
            components:{
                'componentA':componentA,
                'componentB':componentB,
                'componentC':componentC
            },
            methods:{
                changeComponent:function(){
                    if(this.who=='componentA'){
                        this.who='componentB'
                    }else if(this.who=='componentB'){
                        this.who='componentC'
                    }else{
                        this.who='componentA'
                    }
                }
            }
        })
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，119人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue实现当前组件重新加载

App.vue里面，声明reload方法，然后通过provide把reload方法注入，使用bol值控制router-view隐藏（销毁），再通过this.$nextTi...

叁歲伎倆/ 2024年04月19日 08:53/ 0 赞/ 172 阅读

相关 vue 异步加载全局组件 Vue.component(String, Object)

一.举例场景 1.1 vue官方解释 > 在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以

超、凢脫俗/ 2023年06月27日 13:59/ 0 赞/ 33 阅读

相关 vue component使用，动态加载子组件，调用子组件方法

1.vue component使用 component组件（单独拿出一个组件来专门进行切换使用）官方文档 [https://cn.vuejs.org/v2/gui

清疚/ 2023年06月07日 03:17/ 0 赞/ 114 阅读

相关 vue component :实现加载动态组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Myth丶恋晨/ 2023年02月15日 12:51/ 0 赞/ 120 阅读

相关 vue 动态加载组件

<component :is="currentView"></component> this.currentView = () => import("@/vi

秒速五厘米/ 2023年02月10日 05:21/ 0 赞/ 156 阅读

相关 Vue加载（动态）组件的方式

//正常加载 import index from '../pages/index.vue' import view from '../pages/vie

- 日理万妓/ 2022年11月27日 00:57/ 0 赞/ 349 阅读

相关 html vue 动态加载组件

html vue 动态加载组件 1、html: <components :is="Comtab" ref="Comtabref"> </compo

怼烎@/ 2022年09月04日 11:43/ 0 赞/ 373 阅读

相关 Angular动态加载组件

引言有时候需要根据URL来渲染不同组件，我所指的是在同一个URL地址中根据参数的变化显示不同的组件；这是利用Angular动态加载组件完成的，同时也会设法让这部分动态组

绝地灬酷狼/ 2022年02月23日 02:42/ 0 赞/ 692 阅读

相关 VUE之组件的动态注册和动态加载

目录问题描述项目中的应用使用总结 -------------------- 问题描述实际项目中，针对不同的数据开发了不同的数据展示视图组件，例如：拓扑图

深碍√TFBOYSˉ_/ 2022年02月01日 08:39/ 0 赞/ 1058 阅读

相关 cakephp动态加载组件

跳转回之前页面，并携带提示消息。控制器页面：需要加载Session compent，动态加载组建： $this->Session= $this->Comp

水深无声/ 2022年01月10日 02:17/ 0 赞/ 406 阅读