如何从特定索引呈现 v-for答案

【问题标题】：How to render v-for from particular index如何从特定索引呈现 v-for
【发布时间】：2018-04-08 07:02:03
【问题描述】：

我想在 v-for 中循环从假设从数字 5 到 10 。循环希望在 5 点开始，在 10 点结束。

我试过了

<div v-for="n in 10" v-if="n>=5"></div>

但我想要更有效的循环方式。有谁知道如何使循环从 5 开始？

【问题讨论】：

标签： vue.js

【解决方案1】：

你的例子是可能的：

<div v-for="i in range(5, 10)">
... some code here
</div>

和挂载范围函数：

var app = new Vue({
  el: '#app',
  methods:{
    range : function (start, end) {
      return Array(end - start + 1).fill().map((_, idx) => start + idx)
   }
  }
});

并在jsfidle 中采样。

如果想知道更多，github issue 可以帮助你。

【讨论】：

它太有趣了，这不是内置到 vue 中的
@Adam 是在开玩笑吗？
不是在开玩笑，我真的觉得这不是默认构建在 vue 中的。
你必须确保你的语法没问题。
我有一种我们彼此交谈的感觉。我认为你的帖子很棒，我投了赞成票。都很好！干杯。

【解决方案2】：

也试试这个简单的方法：

new Vue({
  el: '#test',
  data: {
    items: [
      '1',
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '10'
    ]
  },
  methods: {
    sliceItems: function (start, end) {
      return this.items.slice(start, end);
    }
  }
})

<script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script>
<div id="test">
  <ul>
    <li v-for="(item, index) in sliceItems(5,10)" >{{ item }}</li>
  </ul>
</div>

【讨论】：

【解决方案3】：

另一个简单的选择是只使用基本的+/-:

new Vue({
  el: '#app',
  data: {
    start: 5,
    end: 10
  }
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <ul>
    <li v-for="i in end-start" >{{ i+start }}</li>
  </ul>
</div>

如果你真的需要多次使用{{ i }}，又被添加start困扰，可以使用一个小技巧：

new Vue({
  el: '#app',
  data: {
    start: 5,
    end: 10
  }
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <ul>
    <template v-for="curr in end-start" >
      <li v-for="i in [curr+start]">
        {{ i }}{{ i }}{{ i }}{{ i }}{{ i }}{{ i }}{{ i }}{{ i }}{{ i }}
      </li>
    </template>
  </ul>
</div>

【讨论】：