Vue.js 动态生成内容的分页

考虑以下代码

添加卡
卡片标题
删除
导出默认值{
数据：函数（）{
返回{
卡片：[]
}
},
方法：{
addCard:function（）{
这个。卡。推({
说明：“，
});
},    
deleteCard:函数（索引）{
这是卡拼接（索引1）；
}
},
}

我的解决方案是先计算当前页面的所有卡片

使用computed属性计算分页所需的相关值

在下面的简单示例中（这只是一个示例，您需要根据实际需要添加必要的验证，如边界条件）：

页面是页面计数

cardsofurpage是当前页面中的卡片

然后添加一个数据属性=pageIndex保存当前页面的索引

不管怎样，记住数据驱动

列出分页所需的所有参数

然后在数据属性或计算属性中声明它们

在计算属性或方法中执行必要的计算

PS：我不知道你用的是哪种css框架，所以我用了bootstrap

Vue.component（'v-cards'{
模板：`
添加卡片总页数：{{Pages}}卡片总数：{{Cards.length}页面大小：
卡片标题：{{Card.description}}
删除
上一页-{pageIndex+1}}-下一页

`,
数据：函数（）{
返回{
卡片：[]，
页面大小：6，
页面索引：0
}
},
计算：{
页面：函数（）{
返回Math.floor（this.cards.length/this.pageSize）+1
},
cardsOfCurrPage:函数（）{
返回此.cards.slice（this.pageSize*this.pageIndex，this.pageSize*（this.pageIndex+1））
}
},
方法：{
addCard:function（）{
这个。卡。推({
描述：此.cards.length，
});
},    
deleteCard:函数（索引）{
这是卡拼接（索引1）；
},
gotoPrev:function（）{this.pageIndex-=1}，
gotoNext:function（）{this.pageIndex+=1}
},
})
新Vue({
el:“#应用程序”，
数据（）{
返回{
}
}
})

这非常好。在computed pages函数中，您使用这种方法是因为它实时计算卡的数量吗？“记住数据驱动”我想到了第1项，但我不知道如何将其付诸实践。我想用id作为参考来划分每页的项目数。谢谢。从这里，我想我可以得出这样的结论：在n行中显示m个项目和分页中的页码是什么样子。在这种情况下，只有在更改计数（卡片）或页面大小时，才需要重新计算变量=pages。因此，使用一个计算属性是很好的做法。如果转到下一页/上一页，它将不会触发计算属性=页的反应性（不会重新计算）。谢谢！知道了。