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

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>