vue中使用v-for 循环标签动态改变标签ID

Posted 2021-09-07 棘丶

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"   />
        </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 })
      }
  },