vue的for循环里面如何暂停做操作

  • Z时代
  • 2024-02-18
  • 分类：IT

vue的for循环里面如何暂停做操作

<div v-for="(item, index) in 100" :key="index">

<el-button @click="click">{{item}}</el-button>

</div>

比如我循环100 但是刚开始我只显示 按钮1, 当我点击按钮1的时候我就显示按钮2,当我点击按钮2的时候就显示按钮3,以此类推, 知道点击完100次 就全部都显示出来

回答：

找个中间变量控制一下不就可以了

<div v-for="(item, index) in 100" :key="index">
  <el-button @click="click" v-if="index <= canShowIndex">{{item}}</el-button>
</div>
// 标记 
canShowIndex = 0;
// click Fun
click () {
// 点击一次 + 1 
  this.canShowIndex++；
}

回答：

@code_shuai 的答案 ✓，但是有一个小问题 —— 点过的按钮可以再点，而且在最后加一行。

那么问题来了，这个是问题主的 —— 点过的按钮应该如何处理？

  • 点过之后再点就跟点最后一个按钮一样（即 @code_shuai 答案中的效果）

  • 点过之后就 disabled？

    这个需要在显示按钮的时候根据 canShowIndex 和当前 index 对比来决定是否添加 disabled 属性

    <el-button :disabled="index < canShowIndex" ...>{{item}}</el-button>

  • 点过之后再点无反应

    这需要在 click 事件处理函数中判断当前 index 和 canShowIndex 的关系

    click(v) {
      if (v === canShowIndex.value) {
        canShowIndex.value++;
      }
    }
    <el-button @click="click(index)" ...>{{item}}</el-button>
  • 在 Vue SFC Playground (Vue3) 中看示例

以上是 vue的for循环里面如何暂停做操作 的全部内容， 来源链接： utcz.com/p/937561.html

回到顶部