如何打破 vue.js 中的 v-for 循环? [英] How to break v-for loop in vue.js?

问题描述

我有这个 v-for 循环一个我的 vue.js 应用程序:

 
//如果索引 > 则中断20<p>{{word}}</p>

我想在渲染 20 个单词后跳出循环.我怎样才能做到这一点?我查看了文档，但没有看到任何相关内容.

解决方案

可以在循环开始前操作数组

<p>{{word}}</p>

I have this v-for loop an my vue.js app:

  <div v-for="(word, index) in dictionary"> 
     // break if index > 20
     <p>{{word}}</p>
  </div>

I want to break out of the loop after rendering 20 words. How can I achieve this? I looked at the docs but did not see anything about this.

解决方案

you can manipulate the array before loop start

<div v-for="(word, index) in dictionary.slice(0,20)"> 
    <p>{{word}}</p>
</div>

这篇关于如何打破 vue.js 中的 v-for 循环?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！