写一个每页设置六个图片,然后页数进行绑定,用vue2写
时间: 2023-07-18 13:11:14 浏览: 43
您好!以下是一个简单的Vue2组件示例,可以实现每页显示6个图片,并且可以进行分页:
```
<template>
<div>
<div v-for="(group, index) in groups" :key="index">
<div v-for="(image, subIndex) in group" :key="subIndex">
<img :src="image.src" :alt="image.alt" />
</div>
</div>
<div class="pagination">
<button v-if="currentPage > 1" @click="currentPage--">Prev</button>
<button v-for="page in pageCount" :key="page" @click="currentPage = page">{{ page }}</button>
<button v-if="currentPage < pageCount" @click="currentPage++">Next</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
images: [
{ src: 'image1.jpg', alt: 'Image 1' },
{ src: 'image2.jpg', alt: 'Image 2' },
{ src: 'image3.jpg', alt: 'Image 3' },
{ src: 'image4.jpg', alt: 'Image 4' },
{ src: 'image5.jpg', alt: 'Image 5' },
{ src: 'image6.jpg', alt: 'Image 6' },
{ src: 'image7.jpg', alt: 'Image 7' },
{ src: 'image8.jpg', alt: 'Image 8' },
{ src: 'image9.jpg', alt: 'Image 9' },
{ src: 'image10.jpg', alt: 'Image 10' },
{ src: 'image11.jpg', alt: 'Image 11' },
{ src: 'image12.jpg', alt: 'Image 12' },
],
currentPage: 1,
};
},
computed: {
groups() {
const start = (this.currentPage - 1) * 6;
const end = start + 6;
return this.images.slice(start, end).reduce((acc, val, index) => {
const groupIndex = Math.floor(index / 2);
if (!acc[groupIndex]) acc[groupIndex] = [];
acc[groupIndex].push(val);
return acc;
}, []);
},
pageCount() {
return Math.ceil(this.images.length / 6);
},
},
};
</script>
<style>
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
}
.pagination button {
margin: 0 5px;
}
</style>
```
这个组件中,使用了`images`数组来存储所有的图片信息,`currentPage`表示当前页数。`groups`是一个计算属性,用来根据当前页码,将图片分成每组6个,并且每行显示2个的形式。`pageCount`是另一个计算属性,用来计算总页数。最后,使用`v-for`指令来动态渲染图片和分页按钮。