<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
    <child-one v-if="type == 'child-one'"></child-one>
    <child-two v-if="type == 'child-two'"></child-two>
&lt;button @click="handleButtonClick"&gt;change&lt;/button&gt;

</div> <script type="text/javascript"> Vue.component("child-one", { template: &lt;div&gt;child-one&lt;/div&gt; });

Vue.component("child-two", {
    template: `&lt;div&gt;child-two&lt;/div&gt;`
});

var vm = new Vue({
    el: "#root",
    data: {
        type: "child-one"
    },
    methods: {
        handleButtonClick: function() {
            this.type = (this.type == "child-one" ? "child-two" : "child-one");
        }
    }
})

</script> </body> </html>

同样的效果,使用动态组件(点击切换会销毁一个组件,创建另一个组件。很显然,这样对性能是有损耗的):

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./vue.js"></script>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
//当然还可以用动态组件的方式(vue自带的标签,它指的就是一个动态组件)。动态组件的意思是:它会根据:is里面数据的变化自动加载不同的组件:
<component :is="type"></component>

&lt;button @click="handleButtonClick"&gt;change&lt;/button&gt;

</div> <script type="text/javascript"> Vue.component("child-one", { template: &lt;div&gt;child-one&lt;/div&gt; });

Vue.component("child-two", {
    template: `&lt;div&gt;child-two&lt;/div&gt;`
});

var vm = new Vue({
    el: "#root",
    data: {
        type: "child-one"
    },
    methods: {
        handleButtonClick: function() {
            this.type = (this.type == "child-one" ? "child-two" : "child-one");
        }
    }
})

</script> </body> </html>