关于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 })      }  },