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>