关于vue.js:vue中使用vfor-循环标签动态改变标签ID

1. 例子应用 elment-ui 中 el-card 卡片循环标签和 Canva 画布工具

 <el-col v-for="item in tabledata" :key="item.id" class="card" :span="5">
        <el-card class="box-card">
          <a href="#" @click="up"> 上 </a>
          <a href="#" @click="down"> 下 </a>
          <a href="#" @click="onLeft"> 左 </a>
          <a href="#" @click="onRight"> 右 </a>
          <span class="shot"> 射手:</span>
          <p> 击发次数: <span>0</span></p>
          <canvas :id="forId(item.id)" ref="canvas" width="300px" height="300px" />
        </el-card>
 </el-col>

2. 在 methods 中增加办法

forId(id) {return 'MyCanvas' + id},
// 扭转 tabledata 个数花多少个卡片
surfaceIndex(selVal) {
      // 先清空已有数组
      this.tabledata = []
      for (let j = 1; j <= selVal; j++) {this.tabledata.push({ id: j})
      }
  },