Vue-实现列表的搜索和排序

搜索和排序的功能都是通过计算属性：
1、搜索的主要通过filter过滤出符合条件的数据并保存起来
2、对符合条件的数据进行升降的排序，使用sort排序

<template>
  <div class="content">
    <!-- 头部 -->
    <div class="header flex-row">
      <div class="inner flex-row">
        <span>价格排序</span>
        <select v-model="sortStr">
          <option class="options" value="1">价格从高到低</option>
          <option class="options" value="0">价格从低到高</option>
        </select>
        <div class="flex-1"></div>
        <input type="text" placeholder="搜索内容" v-model="keyword" />
        <button>搜索</button>
      </div>
    </div>
    <div class="flex">
      <ul>
        <li class="flex-row" v-for="good in list" :key="good.id">
          <img src="../assets/img/shop.png" alt="" />
          <span class="title">{{ good.title }}</span>
          <div class="flex-1"></div>
          <div class="price">
            实付:
            <span>￥{{ good.price.toFixed(2) }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      // 搜索关键字
      keyword: "",
      // 排序顺序
      sortStr: "1",
      // 商品类别
      goodList: [
        {
          id: 1,
          title:
            "府品标面果吧啦些中的市对理吧时中件把吃车中时时就是一个商品标出啦啦时时的啦",
          price: 621,
        },
        {
          id: 2,
          title:
            "府品标面果吧啦些中的市对理吧时中件把吃车中时时就是一个商品标出啦啦时时的啦的民",
          price: 21.0,
        },
        {
          id: 3,
          title:
            "府品标面果吧啦些中的市对理吧时中件把吃车中时时就是一个商品标出啦啦时时的啦的民123",
          price: 123,
        },
        {
          id: 4,
          title:
            "花品标装毕理哈时华理吧时呼到吧时华中吧啦鲜甲巴啦就是一个商品标想时时前市时前前222",
          price: 21,
        },
      ],
      // 结果
      resultList: [],
    };
  },
  created() {},
  watch: {
    keyword(newVal) {
      let arr = this.goodList;
      if (newVal.length == 0) {
        this.goodList = arr;
      }
    },
  },
  computed: {
    list() {
      // 1、拿到当前所有的数据
      const { keyword, sortStr, goodList } = this;
      // 2、根据搜索条件查询
      let arr = goodList.filter((item) => item.title.indexOf(keyword) !== -1);
      console.log(arr);
      // 3、拿到搜索后的数据，进行升/降排序
      if (sortStr === "1") {
        arr.sort((a, b) => b.price - a.price);
      } else {
        arr.sort((a, b) => a.price - b.price);
      }
      return arr;
    },
  },
  methods: {},
};
</script>

<style lang="less" scoped>
@import url("../assets/css/globle.css");
.flex-1 {
  flex: 1;
}
.flex-row {
  display: flex;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.content {
  width: 90%;
  margin: 0 auto;
  padding: 0 0 30px 0;
  box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.2);
}
// 头部
.header {
  height: 174px;
  padding: 0 30px;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(255, 245, 234);
  .inner {
    width: 100%;
    display: flex;

    select {
      margin-left: 15px;
      width: 167px;
      border: 1px solid #fff3e9;
      height: 40px;
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding-left: 20px;
      .options {
        height: 46px !important;
        line-height: 46px;
      }
    }
    input {
      height: 34px;
      padding: 0 12px 0;
      outline: none;
      background: #fff;
      border: 1px solid #e2eefe;
    }
    button {
      width: 76px;
      height: 37px;
      background: #2988f9;
      padding: 0;
      color: #fff;
      border: none;
      border-radius: 2px;
    }
  }
}

ul {
  width: 90%;
  box-sizing: border-box;
  border-radius: 30px;
  padding: 0 62px 10px;
  margin: 30px auto;
  background-color: #eff5fe;
  li {
    justify-content: flex-start;
    padding: 14px 0;
    border-bottom: 2px solid #d2d3d4;
    img {
      height: 80px;
      width: 80px;
      margin-right: 12px;
    }
    .title {
      color: #2d89f9;
    }
    .price {
      display: flex;
      align-items: flex-end;
      span {
        color: #ff4f00;
      }
    }
  }
}
</style>

1. 搜索功能的实现是通过computed属性计算出新的数组，该数组通过filter对persons数组进行过滤得到。

   array.filter(function(currentValue,index,arr), thisValue)
   

   参数说明：

   function(currentValue,index,arr)：必须。函数，数组中的每个元素都会执行这个函数；

   currentValue：必须。当前元素的值；

   index：可选。当前元素的索引值；

   arr：可选。当前元素属于的数组对象；
   thisValue：可选。对象作为该执行回调时使用，传递给函数，用作“this”的值。

   在本例中：

   goodList.filter((item) => item.title.indexOf(keyword) !== -1);
   

   注： =>相当于function(){return}

   goodList.filter((item) =>{
   	return item.title.indexOf(keyword) !== -1
   });
   

2、通过v-model给select绑定值，根据绑定的值确定排序的顺序

  if (sortStr === "1") {// 降序
        arr.sort((a, b) => b.price - a.price);
      } else { // 升序
        arr.sort((a, b) => a.price - b.price);
      }

原文地址：https://www.pianshen.com/article/2618257279/