zoukankan html css js c++ java

component-04 动态绑定组件

<body>
    <div id="app">
        <component v-bind:is="who"></component>   <!-- 动态绑定 -->
        <button @click="changeComponent">changeComponent</button> <!--  点击按钮运行方法里的函数  changeComponent -->

    </div>
</body>
<script type="text/javascript">
        var componentA={
            template:`<div style="color:red;">I'm componentA</div>`
        }
        var componentB={
            template:`<div style="color:green;">I'm componentB</div>`
        }
        var componentC={
            template:`<div style="color:pink;">I'm componentC</div>`
        }

    var app=new Vue({
            el:"#app",
            data:{
                who:"componentAA"
            },
            components:{
                "componentAA":componentA,  //componentAA是组件名  
                "componentBB":componentB,
                "componentCC":componentC,
            },
            methods:{
                changeComponent:function(){
                    if(this.who=='componentAA'){
                        this.who='componentBB';
                    }else if(this.who=='componentBB'){
                        this.who='componentCC';
                    }else{
                        this.who='componentAA';
                    }
                }
            }
            
    })
    
</script>

查看全文

相关阅读:
with open 向文件的某一固定行，追加内容
 静态语言与动态语言的区别
 ELK
matplotlib绘图
 django用户认证
 django+uwsgi+nginx 部署生产环境
 图片验证码+session
ajax
form
middleware中间件

原文地址：https://www.cnblogs.com/jinsuo/p/8481552.html