vue動態組件

用於在不同組件之間進行動態切換是非常有用的，可以通過 Vue 的 元素加一個特殊的 is 特性來實現
效果圖

代碼如下

<template>
  <div class="person2">
   <button @click="change()">點擊切換</button>
    <component :is="isShow"></component>
  </div>
</template>

<script>
export default {
  data () {
    return {
      index: 0,
      arr: ['first', 'second', 'third']
    }
  },
  components: {
    first: {
      template: `<div>第一個</div>`
    },
    second: {
      template: `<div>第二個</div>`
    },
    third: {
      template: `<div>第三個</div>`
    }
  },
  computed: {
    isShow () {
      return this.arr[this.index]
    }
  },
  methods: {
    change: function () {
      this.index < 2 ? this.index++ : this.index = 0
    }
  }
}
</script>

<style>
  #allmap{
    width: 100%;
    height: 15rem;
  }
</style>