Question

我想循环使用v-for，假设从5到10。循环想要从5开始并在10结束。

我试过这个

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

但我想要更有效的循环方式。有没有人知道怎么做，循环从5开始？

Answer 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可以帮到你。

Answer 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>

Answer 3

另一个简单的替代方法是使用基本+ / -：

＆＃13;

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

＆＃13;

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

＆＃13;

如果您确实需要多次使用{{ i }}并且因添加启动而感到困扰，您可以使用一个小技巧：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何从特定索引渲染v-for

3 个答案: