vue for循环使用dplayer

可以使用Vue的v-for指令来循环生成多个DPlayer实例。首先需要引入DPlayer的JS和CSS文件，然后在Vue组件中使用v-for指令来循环生成多个DPlayer实例。示例代码如下：

<template>
  <div>
    <div v-for="(item, index) in videoList" :key="index">
      <div :id="'dplayer-' + index" class="dplayer"></div>
    </div>
  </div>
</template>

<script>
import DPlayer from 'dplayer'

export default {
  data() {
    return {
      videoList: [
        {
          url: 'https://xxx.com/1.mp4',
          pic: 'https://xxx.com/1.png',
          title: 'Video 1'
        },
        {
          url: 'https://xxx.com/2.mp4',
          pic: 'https://xxx.com/2.png',
          title: 'Video 2'
        },
        {
          url: 'https://xxx.com/3.mp4',
          pic: 'https://xxx.com/3.png',
          title: 'Video 3'
        }
      ],
      players: []
    }
  },
  mounted() {
    this.videoList.forEach((item, index) => {
      const player = new DPlayer({
        container: document.getElementById(`dplayer-${index}`),
        video: {
          url: item.url,
          pic: item.pic,
          type: 'auto'
        },
        autoplay: false,
        theme: '#FADFA3'
      })
      this.players.push(player)
    })
  },
  destroyed() {
    this.players.forEach(player => {
      player.destroy()
    })
  }
}
</script>

<style>
.dplayer {
  width: 100%;
  height: 500px;
}
</style>

在上面的代码中，通过v-for指令循环生成多个div元素，每个div元素的id属性值通过index来动态生成，然后在mounted钩子中通过DPlayer的构造函数创建多个DPlayer实例，并将实例存储在this.players数组中，在destroyed钩子中销毁所有DPlayer实例。