如何打破 vue.js 中的 v-for 循环？

Question

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

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

我想在渲染 20 个单词后跳出循环。我怎样才能做到这一点？我查看了 文档，但没有看到任何关于此的信息。

原文由 Karlom 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 cwang 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于这种情况，此解决方案最适合我。

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

原文由 maswahyu 发布，翻译遵循 CC BY-SA 4.0 许可协议