day2-数组排序案例

最新推荐文章于 2024-07-28 13:16:41 发布

reaaal

最新推荐文章于 2024-07-28 13:16:41 发布

阅读量146

点赞数

分类专栏： vue视频跟学

本文链接：https://blog.csdn.net/reaaal/article/details/107355094

版权

vue视频跟学专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://static.wangxiao.cn/zhuanti/commonResoures/jquery1.12.4.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <title>Document</title>
</head>

<body>
  <div id="app">
    <fieldset>
      <legend>数据排序以及相关操作</legend>
      <input type="text" placeholder="请输入名字" v-model="searchName" />
      <ul>
        <li v-for="(item,index) in newArr" :key="item.index">
          id:{{index+1}}---索引:{{index}}---姓名:{{item.name}}---年龄:{{item.age}}
        </li>
      </ul>
      <button @click="state=1">年龄升序</button>
      <button @click="state=2">年龄降序</button>
      <button @click="state=0">原来顺序</button>
    </fieldset>
  </div>
  <script>
    const vm = new Vue({
      el: "#app",
      state: 0,//默认的排序状态
      data: {
        searchName: '', //获取用户输入的数据
        persons: [
          { name: '小王', age: 22 },
          { name: '亮亮', age: 30 },
          { name: '小方', age: 25 }
        ]
      },
      computed: {
        newArr() {
          //  对person的数组进行数据筛选
          const { searchName, persons, state } = this
          // 筛选。如果persons数组中的每个对象中的name属性中包含了searchName的内容，进行过滤，并返回一个新的数组
          var newArr = persons.filter((item) => item.name.indexOf(searchName) !== -1);

          // 如果状态不为0就进行排序
          if (state !== 0) {
            newArr.sort((p1, p2) => {
              return state === 2 ? p2.age - p1.age : p1.age - p2.age
            })
          }

          return newArr;
        }

      }
    })
  </script>
</body>

</html>