zoukankan      html  css  js  c++  java

  • vue-动态组件

    <!DOCTYPE html>
<html>
    <head>
        
        <meta charset="utf-8">
        <title>vue1</title>
        <script src="vue.js"></script>
        <link rel="stylesheet" type="text/css" href="vue.css">
    
    </head>
    <body>        
        <div id="app">

            <component  :is="flag"></component>
            <button @click="change">chang</button>
            
        </div>    
        
        
        <script>
            var boycompt={
                template:`<div>boy</div>`,            
            }
            var girlcompt={
                template:`<div>girl</div>`,                
            }

            var app=new Vue({
                el:"#app",
                data:{
                    flag:"boycompt"

                },
                methods:{
                    change:function(){
                        this.flag=this.flag==="girlcompt" ? "boycompt":"girlcompt"
                    }
                },
                //局部组件要在这里注册
                components:{
                    boycompt,
                    girlcompt

                }
                             
            })        
        </script>
    </body>
</html>
  • 相关阅读:
    集群资源队列监控：Grafana
    1
    3月9号
    jmx
    日常笔记
    nsenter命令简介
    一天2小时
    postgresql Centos7部署
    笔记5
    1
  • 原文地址：https://www.cnblogs.com/JinweiChang/p/12653920.html
Copyright © 2011-2022 走看看