时间戳

首页 > 解决方案 > 如何使用vue在html中的v-for循环中添加偏移量

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

问题描述

所以我遇到的问题是在v-forvue 的功能范围内。我希望能够为数字添加一个偏移量，然后添加到我正在创建的表中。我觉得我可能只是在这个问题上走错了方向。

引用的表格部分的 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 开始迭代。

就像我之前说的那样，如果有人能以正确的方式发送我的邮件，我觉得我可能会走错方向，我将不胜感激。

标签： javascripthtmlfor-loopvue.jsv-for

解决方案

构造 likev-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>

推荐阅读