SOURCE

console 命令行工具 X clear

                    
>
console
var app = new Vue({
  el: '#app',
  components: {
    comA: {
      template: '<div>组件A</div>'
    },
    comB: {
      template: '<div>组件B</div>'
    },
    comC: {
      template: '<div>组件C</div>'
    }
  },
  data: {
    currentView: 'comA'
  },
  methods: {
    handleChangeView: function(component) {
      this.currentView = 'com' + component;
    }
  }
})

var Home = {
  template: '<p>Welcome</p>'
};

var app1 = new Vue({
  el: '#app1',
  data: {
    currentView: Home
  }
})
<div id="app">
  <component :is="currentView"></component>
    <button @click="handleChangeView('A')">切换到A</button>
    <button @click="handleChangeView('B')">切换到B</button>
    <button @click="handleChangeView('C')">切换到C</button>
</div>
<hr />
<div id="app1">
  <component :is="currentView"></component>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>