如何在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个单词后突破循环.我怎样才能做到这一点？我查看了文档,但没有看到任何相关内容.

Answer 1

你可以在循环开始之前操纵数组

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

Answer 2

您必须为截断的字典创建一个计算值（例如，最好准备用于渲染的数据）：

computed: {
 shortDictionary () {
   return dictionary.slice(0, 20)
 }
}

...

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

Answer 3

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

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