Heim  >  Artikel  >  Web-Frontend  >  Einführungs-Tutorial zur VUE3-Entwicklung: Verwenden von Komponenten zur Implementierung von Paging

Einführungs-Tutorial zur VUE3-Entwicklung: Verwenden von Komponenten zur Implementierung von Paging

WBOY
WBOYOriginal
2023-06-16 08:48:061918Durchsuche

VUE3开发入门教程:使用组件实现分页

分页是一个常见的需求,因为在实际开发中,我们往往需要将大量的数据分成若干页以展示给用户。在VUE3开发中,可以通过使用组件实现分页功能,本文将介绍如何使用组件实现简单的分页功能。

1.创建组件

首先,我们需要创建一个分页组件,使用“vue create”命令创建VUE项目,并在src/components目录下创建Pagination.vue文件。

在Pagination.vue文件中,我们需要声明组件的名称、data数据项、methods方法等。代码如下:

<template>
  <div>
    <ul v-if="pages.length">
      <li v-if="currentPage !== 1" @click="changePage(currentPage - 1)">&lt;</li>
      <li v-for="page in pages" :key="page" :class="{'active': page === currentPage}" @click="changePage(page)">{{ page }}</li>
      <li v-if="currentPage !== totalPage && totalPage > 1" @click="changePage(currentPage + 1)">&gt;</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalPage: 0,
      pages: []
    }
  },
  props: {
    total: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    }
  },
  watch: {
    total() {
      this.init()
    }
  },
  methods: {
    init() {
      this.totalPage = Math.ceil(this.total / this.pageSize)
      this.pages = []
      for (let i = 1; i <= this.totalPage; i++) {
        this.pages.push(i)
      }
    },
    changePage(page) {
      if (this.currentPage === page) return
      this.currentPage = page
      // 触发自定义事件
      this.$emit('page-change', this.currentPage)
    }
  },
  created() {
    this.init()
  }
}
</script>

<style>
.pagination {
  text-align: center;
}

ul {
  display: inline-block;
  padding-left: 0;
  margin: 0;
  border-radius: 4px;
}

li {
  display: inline;
  color: #2b2b2b;
  float: left;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #eee;
  margin-right: 3px;
  cursor: pointer;
}

li:hover {
  background-color: #eee;
}

.active {
  background-color: #00a0e9;
  color: #fff;
  border: 1px solid #00a0e9;
  cursor: default;
}

li:first-child {
  margin-right: 10px !important;
}

li:last-child {
  margin-left: 10px !important;
}
</style>

在代码中,我们需要实现分页的初始化方法init,以及向外提供分页切换的方法changePage。同时,我们通过watch监听total属性的变化,当total属性变化时,重新调用init方法初始化分页。

2.引入组件

接下来,在我们的组件中使用分页组件。例如,我们在App.vue中引入Pagination组件,并使用v-for指令在模板中循环展示数据,同时监听Pagination组件的page-change自定义事件。

代码如下:

<template>
  <div class="container">
    <ul>
      <li v-for="item in list" :key="item.id">{{item.text}}</li>
    </ul>
    <Pagination :total="total" :page-size="pageSize" @page-change="handlePageChange"/>
  </div>
</template>

<script>
import Pagination from './components/Pagination'

export default {
  name: 'App',
  components: {
    Pagination
  },
  data() {
    return {
      total: 100,
      list: []
    }
  },
  methods: {
    initData() {
      for (let i = 1; i <= this.total; i++) {
        this.list.push({
          id: i,
          text: `第 ${i} 条数据`
        })
      }
    },
    handlePageChange(page) {
      const start = (page - 1) * this.pageSize
      const end = start + this.pageSize > this.total ? this.total : start + this.pageSize
      this.list = []
      for (let i = start + 1; i <= end; i++) {
        this.list.push({
          id: i,
          text: `第 ${i} 条数据`
        })
      }
    }
  },
  created() {
    this.initData()
  }
}
</script>

<style>
.container {
  margin: 0 auto;
  width: 500px;
}

ul {
  padding: 0;
  list-style: none;
}

li {
  border: 1px solid #eee;
  margin-top: 10px;
  padding: 10px;
}
</style>

在代码中,我们需要通过计算得到当前页展示的数据范围,并根据范围重新渲染数据列表。

3.运行并测试

最后,在命令行中运行“npm run serve”命令,启动开发服务器,并在浏览器中访问http://localhost:8080/,即可看到页面展示了分页组件和数据列表。你可以尝试在页面上点击分页按钮,观察数据列表是否能够正确地切换页码。

以上就是使用组件实现分页的简单示例,在实际开发中,你可以根据项目的需求对分页组件的样式和属性进行自定义,进一步提升用户体验。

Das obige ist der detaillierte Inhalt vonEinführungs-Tutorial zur VUE3-Entwicklung: Verwenden von Komponenten zur Implementierung von Paging. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn