<!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>