Question

我在Vuejs 2.0中构建一个小应用程序我有大约15个迭代元素我想限制v-for只有5个元素，并且可以有更多按钮来显示整个清单。有可能吗？

Answer 1

您可以尝试此代码

<div v-if="showLess">
  <div v-for="value in array.slice(0, 5)"></div>
</div> 
<div v-else> 
  <div v-for="value in array"></div>
</div> 
<button @click="showLess = false"></button>

新数组中只有5个元素。

更新：使这个解决方案适用于数组和对象的微小变化

<div v-if="showLess">
  <div v-for="(value,index) in object" v-if="index <= 5"></div>
</div> 
<div v-else> 
  <div v-for="value in object"></div>
</div> 
<button @click="showLess = false"></button>

Answer 2

你可以尝试这个解决方案......

<div  class="body-table  div-table" v-for="(item,index) in items"  :key="item.id" v-if="items && items.length > 0 && index <= limitationList">....

并设置数据限制

data() {
  return {
    limitationList:5
  };
},

并在你的btn中设置一个功能

  <button  @click="updateLimitation(limitationList)">
    show {{limitationList == 5 ? 'more' : 'less'}}
  </button>

这是你的方法

updateLimitation(limitationList){
  if (this.limitationList == this.items.length) {
    this.limitationList = 5
  }else{
    this.limitationList = this.items.length
  }
}

我希望对你有用......

Answer 3

我为时已晚吗？您可以使用计算出的属性来解决此问题：

<div v-for="value in computedObj">{{value}}</div>
<button @click="limit = null">Shore more</button>

然后输入数据：

data(){
  return {
    object:[], // your original data
    limit: 5 // or any number you wish to limit to
  }
}

最后在您的计算属性中：

computed:{
  computedObj(){
    return this.limit ? this.object.slice(0,this.limit) : this.object
  }
}

当您单击按钮时，将清除限制并显示/返回整个数据

Answer 4

为了解决这个问题，你可以在计算方法中计算限制列表

喜欢这个

<div  class="body-table  div-table" v-for="(item,index) in filterItems"  :key="item.id">
....

<script>

export default {
  data() {
     return {
       items: [],
       limitationList:5
    };
  },
  computed: {
    filterItems () {
      return this.items && this.items.length > 0 && (this.items.length - 1) <= this.limitationList  // or any condition u want 
    }
  }
}

</script>

希望有用。

如何限制`v-for`中元素的迭代

4 个答案: