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