Question

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

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

我想在渲染20个单词后突破循环。我怎样才能做到这一点？我查看docs，但没有看到任何相关内容。

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>

Answer 4

要在v-for级别上执行此操作，请创建一个具有限制的数据对象，并将其与索引进行比较，以通过v-if控制v-for。

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

    <script>
export default{
   data(){
     return{
         limit: 20 }
   }
}
</script>

Answer 5

具有在范围内使用v-for的能力，这里的解决方案不涉及通过剪接或使用计算的来创建新数组：

<div v-for="i in Math.min(dictionary.length, 20)"> 
  <p>{{dictionary[i-1]}}</p>
</div>

https://vuejs.org/v2/guide/list.html

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

5 个答案: