简易分页器 1.定义全局的简易分页组件 2.当前是第一页的时候,“上一页”按钮不显示。当页数为 15 页时候,“下一页”按钮不显示。 3.当点击“上一页”按钮或者“下一页”按钮的时候可以实现去到上一页 或者下一页的效果
时间: 2023-09-12 18:09:48 浏览: 78
可以使用 Vue.js 框架来实现简易分页器。具体实现步骤如下:
1. 在全局中定义分页组件:
```vue
<template>
<div class="pagination">
<button v-if="currentPage > 1" @click="prevPage">上一页</button>
<span>{{ currentPage }}</span>
<button v-if="currentPage < totalPages" @click="nextPage">下一页</button>
</div>
</template>
<script>
export default {
name: 'Pagination',
props: {
currentPage: {
type: Number,
required: true
},
totalPages: {
type: Number,
required: true
}
},
methods: {
prevPage() {
this.$emit('page-change', this.currentPage - 1);
},
nextPage() {
this.$emit('page-change', this.currentPage + 1);
}
}
};
</script>
```
2. 在父组件中使用分页组件,并传入当前页数和总页数:
```vue
<template>
<div class="page">
<div class="content">这是第 {{ currentPage }} 页的内容</div>
<pagination :current-page="currentPage" :total-pages="totalPages" @page-change="changePage" />
</div>
</template>
<script>
import Pagination from './Pagination';
export default {
name: 'Page',
components: {
Pagination
},
data() {
return {
currentPage: 1,
totalPages: 15
};
},
methods: {
changePage(page) {
this.currentPage = page;
}
}
};
</script>
```
3. 当点击“上一页”按钮或者“下一页”按钮时,通过`$emit`方法向父组件传递当前页数,父组件再根据当前页数来更新分页组件的显示。
这样就实现了一个简易分页器。
阅读全文