vue实现分页效果

最新推荐文章于 2023-05-28 10:25:13 发布

是小王啊i

最新推荐文章于 2023-05-28 10:25:13 发布

阅读量523

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_45378970/article/details/108718801

版权

vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

代码来了

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      display: block;
      width: 30px;
      height: 30px;
      line-height: 30px;
      border: 1px solid blue;
      text-align: center;
      text-decoration: none;
    }

    #box {
      width: 200px;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .active {
      background: red;
    }
  </style>
  <script src="./vue.js"></script>
</head>

<body>
  <div id='app'>
    <div>
      名字:<input type="text" placeholder="请输入" v-model='message' @keyup.enter='add()'><br>
      性别:<input type="text" placeholder="请输入性别" v-model='sex1' @keyup.enter='add()'><br>
      年龄:<input type="text" placeholder="请输入年龄" v-model='age1' @keyup.enter='add()'><br>
    </div>
    <ul>
      <li v-for='(item,index) in showLists'>
        {{index+1}}--{{item.name}} --{{item.age}} -- {{item.sex}}
      </li>
    </ul>
    <div id='box'>
      <button @click="prev()">上一页</button>
      <a href="" v-for='(item,index) in pageNum' @click.prevent='getPage(index)'
        :class="pageIndex == index ? 'active' : ''">
        {{item}}
      </a>
      <button @click="next()">下一页</button>
    </div>
  </div>
  <script>
    let users = [
      { id: 1, name: '张三', age: '32', sex: '男', checked: false },
      { id: 2, name: '李四', age: '18', sex: '男', checked: true },
      { id: 3, name: '听风i', age: '18', sex: '男', checked: false },
      { id: 4, name: '飘飘', age: '18', sex: '女', checked: false },
      { id: 5, name: '香香', age: '18', sex: '女', checked: false },
      { id: 6, name: '张三2', age: '32', sex: '男', checked: false },
      { id: 7, name: '李四2', age: '18', sex: '男', checked: true },
      { id: 8, name: '听风2', age: '18', sex: '男', checked: false },
      { id: 9, name: '网二2', age: '18', sex: '女', checked: false }
    ]
    let app = new Vue({
      el: '#app',
      data: {
        users,
        pageSize: 3, //每页的条数
        pageIndex: 0,
        message: '',
        sex1: '',
        age1: ''
      },
      computed: {
        pageNum() {
          let length = this.users.length; //数据长度  
          return Math.ceil(length / this.pageSize);
        },
        showLists() {
          return this.users.slice(this.pageIndex * this.pageSize, (this.pageIndex + 1) * this.pageSize);  //slice() 不会改变原数组
        }
      },
      methods: {
        getPage(i) {
          this.pageIndex = i;
        },
        prev() {
          if (this.pageIndex < 1) {
            return
          }
          this.pageIndex--;   //computed  多个属性影响一个值的改变
        },
        next() {
          if (this.pageIndex >= this.pageNum - 1) {
            return
          }
          this.pageIndex++
        },
        add() {
          //满足所有条件按下enter触发
          if (this.message == '' || this.age1 == '' || this.sex1 == '') {
            return
          }
          let length = this.users.length;
          this.users.push({ id: length + 1, name: this.message, age: this.age1, sex: this.sex1, checked: false });
        }
      }
    })
  </script>
</body>

</html>

是小王啊i

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue实现分页效果

代码来了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0;
复制链接

扫一扫