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

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

您必须为截断字典创建一个计算值（例如，最好准备数据以进行呈现）：

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

...

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

对于此场景，此解决方案最适合我。

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

要在v-for级别执行此操作，请创建一个带有limit的数据对象，并将其与index进行比较，以使用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>

由于v-for可以与range一起使用，因此这里提供了一个解决方案，该解决方案不涉及通过拼接或使用计算的：

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

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

可以使用Array.slice和Math.min函数：

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

使用计算方法：

computed: {
 firtsElements () {
   return this.dictionary.slice(0, Math.min(20, this.dictionary.length))
 }
}