zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    misc子系统
    Spring boot+RabbitMQ环境
    Linux input
    lnmp环境的搭建
    DDD的.NET开发框架
    【踩坑记】从HybridApp到ReactNative
    Migrating from IntelliJ Projects
    Windows下Redis中RedisQFork位置调整
    远程仓库版本回退方法 good
    maven repository
  • 原文地址:https://www.cnblogs.com/lhl66/p/7494927.html
Copyright © 2011-2022 走看看