VUE手写分页

web前端丘丘人

已于 2023-03-06 16:05:16 修改

阅读量251

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2023-03-06 15:34:35 首次发布

本文链接：https://blog.youkuaiyun.com/gpy20031204/article/details/129359174

提示：以下是本篇文章正文内容，下面案例可供参考

效果图
- 代码
json 本地数据

效果图

效果图
在这里插入图片描述

在这里插入图片描述

代码

<template>
  <div class="home">
    <div class="top">
      <div class="title">
        <div>商品ID</div>
        <div>商品名称</div>
        <div>产品介绍</div>
        <div>产品价格</div>
      </div>
      <div v-for="item in list" :key="item.spuId" class="app">
        <div>{
  
  { item.spuId }}</div>
        <div>{
  
  { item.spuTitle.substr(0, 10) }}</div>
        <div>{
  
  { item.spuSubTitle.substr(0, 10) }}</div>
        <div>{
  
  { item.price }}</div>
      </div>
    </div>
    <div class="bottoms">
      <div>
        每页
        <select :value="pagesize" @change="ChangePagesize">
          <option value="1">1</option>
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="15">15</option>
          <option value="20">20</option>
        </select>
        条，共{
  
  { total }}条
      </div>
      <div class="bottom">
        <div class="bottom-box">
          <div v-for="(item,index) in calcPage" :key="index"