列表排序（vue练习）

最新推荐文章于 2025-04-24 17:20:34 发布

吃不饱的我

最新推荐文章于 2025-04-24 17:20:34 发布

阅读量93

点赞数

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

本文链接：https://blog.youkuaiyun.com/yh_31/article/details/128321532

版权

笔记专栏收录该内容

70 篇文章

订阅专栏

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/vue.js"></script>
</head>

<body>
  <div id="app">
    <input type="text" placeholder="请输入名字" v-model="keywords">
    <button @click="sortType=2">年龄升序</button>
    <button @click="sortType = 1">年龄降序</button>
    <button @click="sortType = 0">年龄原顺序</button>
    <ul>
      <li v-for="(p,index) of filePerson" :key="p.id">
        {{p.name}}-{{p.age}}-{{p.gender}}
      </li>
    </ul>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          keywords: '',
          sortType: 0,//0原顺序  1降序  2升序
          person: [
            { id: '001', name: '杨树', age: 28, gender: '女' },
            { id: '002', name: '杨小羊', age: 68, gender: '女' },
            { id: '003', name: '周杰伦', age: 13, gender: '男' },
            { id: '004', name: '张杰', age: 12, gender: '男' },
            { id: '005', name: '韦一航', age: 16, gender: '女' }
          ],

        }
      }, computed: {
        filePerson() {
          const arr = this.person.filter((p) => {
            return p.name.indexOf(this.keywords) !== -1
          })

          // 判断是否需要排序
          if (this.sortType) {
            arr.sort((p1, p2) => {
              return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
            })
          }
          return arr
        }
      }
    })
  </script>
</body>

</html>