el-carousel使用循环，el-carousel-item里继续循环

本文主要是介绍el-carousel使用循环，el-carousel-item里继续循环，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

简述

vue项目使用elementui，有一个需求。首先使用el-carousel-item实现一个多页的走马灯。这个可以使用v-for来实现多页。然后有一个数组对象arr有18个元素。我要把arr放在el-carousel-item里面，但是每个el-carousel-item里只能放两个arr元素，怎么实现呢

要在每个 el-carousel-item 中放置两个 arr 元素，你可以在 v-for 循环中使用一个索引来控制每个 el-carousel-item 中要显示的元素。

以下是一个示例代码：

<template><el-carousel><el-carousel-item v-for="(page, index) in pageCount" :key="index"><!-- 显示当前页的元素 --><div v-for="(item, innerIndex) in getPageElements(index)" :key="innerIndex"><!-- 显示arr中的元素 -->{{ item }}</div></el-carousel-item></el-carousel>
</template><script>
export default {data() {return {arr: [/* your array of 18 elements */],itemsPerPage: 2 // 每页显示的元素个数};},computed: {// 计算总页数pageCount() {return Math.ceil(this.arr.length / this.itemsPerPage);}},methods: {// 获取当前页要显示的元素getPageElements(pageIndex) {const startIndex = pageIndex * this.itemsPerPage;return this.arr.slice(startIndex, startIndex + this.itemsPerPage);}}
};
</script>

这段代码中，getPageElements 方法根据当前页索引来计算应该显示的元素，然后在模板中使用 v-for 指令来遍历显示这些元素。

这篇关于el-carousel使用循环，el-carousel-item里继续循环的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---