首页 > 其他分享 >上下翻页按钮,上一页 下一页 vue2,分页

上下翻页按钮,上一页 下一页 vue2,分页

时间:2023-06-09 18:12:57浏览次数:48  
标签:翻页 一页 number vue2 按钮 ifchinese

已经有每一页对应的数据,一共五页,点击到最后一页再点下一页按钮时回到第一页

 

        <div class="button-list">
          <button @click.prevent="handleLeft">
            <i class="el-icon-arrow-left"></i>
            {{ifchinese ? '上一页':'pre page'}}
          </button>
          <button @click.prevent="handleRight">
            {{ifchinese ? '下一页':'next page'}}
            <i class="el-icon-arrow-right"></i>
          </button>
        </div>

 

 1     //上一页
 2     handleLeft() {
 3       this.number -= 1
 4       if(this.number < 0) return this.number = 5
 5     },
 6     // 下一页
 7     handleRight() {
 8       this.number += 1
 9       if(this.number > 5) return this.number = 0
10     },

 

  

标签:翻页,一页,number,vue2,按钮,ifchinese
From: https://www.cnblogs.com/sinberya/p/17469934.html

相关文章

  • 下拉菜单缓慢展开收起的动画过渡效果,vue2 CSS
    需求:点击下拉菜单按钮,显示子菜单并有过渡效果过渡效果:缓慢展开收起环境:vue2CSS分析:子菜单的高度有没有固定,如果子菜单的高度固定,可以设置高的变化添加过渡效果。如果高度不固定设置最大高度的变化添加过渡效果图片展示:展开状态收起状态 实现代码:<template><div>......
  • 【Vue2.x】vue2给对象动态添加响应式属性
    1vue2给对象动态添加响应式属性vue2里对象的响应式是通过Object.defineProperty()实现1.1给对象添加单个响应式属性使用Vue.set()或this.$set()参数第一个参数,是目标对象第二个参数,是要添加的属性名字第三个参数,是要属性值1.2给对象批量添加响应式属性使用Object.......
  • Sqlite硬分页(第一页,最后1页)(08)
    第一页,前10项select*fromatbwhereid<((selectmin(id)fromatb)+10) 最后1页,10项select*fromatbwhereid>((selectmax(id)fromatb)-10) ......
  • vue2.0运行导入的项目出现node:events:491 throw er; // Unhandled ‘error‘ event错
    错误提示:Apprunningat: -Local: http://localhost:8080/ -Network:unavailable Notethatthedevelopmentbuildisnotoptimized. Tocreateaproductionbuild,runnpmrunbuild.node:events:491 thrower;//Unhandled'error'event在尝试过关闭占用端......
  • vue2.0运行导入的项目出现node:events:491 throw er; // Unhandled ‘error‘ event错
    错误提示:Apprunningat: -Local: http://localhost:8080/ -Network:unavailable Notethatthedevelopmentbuildisnotoptimized. Tocreateaproductionbuild,runnpmrunbuild.node:events:491 thrower;//Unhandled'error'event在尝试过关闭占用端......
  • element-ui中Select 选择器异步加载下一页
    场景当我们使用Select选择器存放大量数据的时候。会发现存在这么2个问题。1.接口响应时间较长。(因为数据量较多,一次查询的所有)甚至有可能超时。2.前端下拉框滑动卡顿。这个时候们如何解决上面面临的问题呢?有的小伙伴可能会说:1.分页加载。确实是可以解决问题。2.页面卡顿......
  • Vue2项目开发时遇到:<template v-for> key should be placed on the <template> tag
    问题缘由:Vue2和Vue3中,对待template中存在v-for行为的组件正好相反Vue2中key必须写在子元素中,Vue3中key必须写在template中,不然会报错使用volar插件,使用Vue3语法检测代码,导致错误 解决方案:1、禁用volar2、貌似可以修改配置项,但尚未尝试......
  • Vue2知识点简要
    一、双向绑定原理Vue2采用的是观察者-发布订阅模式,利用Object.defineProperty实现对数据已定义属性的监控(定义观察者模式),编译DOM时解析v-model等属性以及对input框等注册事件实现UI和JS的交互(也就是注册发布订阅这模式);详细的是主要是定义一个Observe类实现对象......
  • vue2插槽的透传
    多组件嵌套的情况下,有时候会希望父组件向孙子组件(或者更小的辈分)的slot中插入内容,显然,这需要在孙子组件里面用<slot:name="field.component":data="formValue"/>,在父组件里面用<childComponent#slotName="childData"><childComponent/>。但是在子组件中应该如何进行插槽的......
  • element -plus el-table序号翻页连续
    <el-table-columnlabel="序号"type="index"align="center"width="50"><template#default="scope"><span>{{(current_page-1)*pageSize+scope.$index+1......