Vue过滤和分页

Question

如何在Vue分页中基于选定的数字(例如10、15或25(渲染一定数量的数组对象？我尝试过每页渲染10个项目，效果很好。

Answer 1

您可以创建一个计算属性来分割数组，并在使用v-for:迭代数组时使用此计算属性

var app = new Vue({
el: '#app',
data: {
items: [
{ id: 1, name: 'Foo' },
{ id: 2, name: 'Bar' },
{ id: 3, name: 'Baz' }
],
amountOfItemsShown: 2,
},
computed: {
slicedItems() {
return this.items.slice(0, this.amountOfItemsShown);
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

<p>Amount of items shown: <input type="range" :min="1" :max="3" v-model="amountOfItemsShown"> <strong>{{ amountOfItemsShown }}</strong></p>
<div v-for="item in slicedItems" :key="item.id">
{{ item.name }}
</div>
</div>