vue2.0 动态切换组件

组件标签是Vue框架自定义的标签,它的用途就是可以动态绑定我们的组件,根据数据的不同更换不同的组件。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../vue2.2.js"></script>
    <title>component-4</title>
</head>
<body>
    <h1>component-4</h1>
    <hr>
    <div id="app">
       <component v-bind:is="who"></component>
       <button @click="changeComponent">changeComponent</button>
    </div>
 
    <script type="text/javascript">
        var componentA={
            template:`<div style="color:red;">this componentA</div>`
        }
        var componentB={
            template:`<div style="color:green;">thiscomponentB</div>`
        }
        var componentC={
            template:`<div style="color:pink;">this componentC</div>`
        }
       
        var vm=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>
</body>
</html>
复制代码

 

posted @   鱼樱前端  阅读(4183)  评论(0编辑  收藏  举报
编辑推荐:
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
阅读排行:
· 不到万不得已,千万不要去外包
· C# WebAPI 插件热插拔(持续更新中)
· .NET 9 new features-C#13新的锁类型和语义
· 会议真的有必要吗?我们产品开发9年了,但从来没开过会
· 《SpringBoot》EasyExcel实现百万数据的导入导出
 
拂雪 - 不才
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.
  1. 1 往后余生 王贰浪
  2. 2 拂雪 不才
  3. 3 我的一个道姑朋友 洛尘鞅
  4. 4 大田后生仔 王雨萌
点击右上角即可分享
微信分享提示