<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <component :is="type"></component> <!--<child-one v-if="type=='child-one'"></child-one> <child-two v-if="type=='child-two'"></child-two>--> <button @click="handleclick">点击</button> </div> <script> Vue.component("child-one",{ template:'<div v-once>child-one</div>' }) Vue.component("child-two",{ template:'<div v-once>child-two</div>' }) var app=new Vue({ el:"#app", data:{ content:'hello vue', type:'' }, methods:{ handleclick:function () { this.type=this.type=='child-one'?'child-two':'child-one' } } }) </script> </body> </html>