Question

所以我遇到的问题是在vue的v-for函数内。我希望能够为该数字添加一个偏移量，然后将其添加到我正在创建的表中。我觉得我可能正朝着错误的方向前进。

表部分的HTML代码参考：

<tbody>
   <tr v-for="n in parseInt(recordCount)">
      <td class="idNum">
         {{ n }}
      </td>
      <td v-for="select in controlArray">
         <select v-model="selected[n][select][n]">
            <option v-for="option in options" v-bind:value="option.value">
               {{ option.text }}
            </option>
         </select>
      </td>
      <td v-for="input in controlArray">
         <input type="text" class="form-control" v-model="valueArray[n][input][n]" />
      </td>
   </tr>
</tbody>

具体的问题是我创建v-for="n in parseInt(recordCount)"的位置。 n变量未初始化，而recordCount变量是可由用户选择的数字。

我希望能够在数字的前面添加一个偏移量，以便与其从0开始迭代，而可以从一个更大的数字开始。

就像我之前说过的那样，如果有人可以用正确的方式发送我的信息，我会为此而走错方向。

Answer 1

类似v-for="n in 10"的构造是Range的一种特殊构造，它将重复10次，从n=1到n=10结束。

如果要遍历自定义范围，可以调用一个方法来生成它：

new Vue({
  el: "#app",
  data: {
    recordCount: 10,
  },
  methods: {
    createRange(startFrom, endWith) {
      const r = [];
      for(let i = startFrom; i <= endWith; i++) {
        r.push(i);
      }
      return r;
    }
  }
})

#app { padding: 10px; }
ul { list-style: none; padding: 0; }
li { margin: 4px 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <label>Record Count: <input v-model="recordCount"/></label>
  <ul>
    <li v-for="n in createRange(5, recordCount)">
      {{ n }}
    </li>
  </ul>
</div>

Answer 2

对于偏移量不太大的情况，您可以在v-if旁边提供v-for：

<tbody>
   <tr v-for="n in (parseInt(recordCount) + offset)" v-if="n > offset">
      <td class="idNum">
         {{ n }}
      </td>

      <!-- rest of your HTML -->

   </tr>
</tbody>

如何使用vue在html的v-for循环中添加偏移量

2 个答案: