一,前言

上一篇介绍了列表渲染指令v-for的使用
和列表相关的知识点还有如何实现列表的过滤和排序功能
在介绍列表过滤和排序功能时用到了计算属性

---

二,列表的搜索过滤

列表的搜索过滤功能,如通过外部输入对列表内容进行查询,
返回包含输入字符串内容的行项目信息

先看一下Demo:

<div id="app">

  <input type="text" v-model="searchText">

  <ul>
    <li v-for="(book, index) in filterBooks" :key="index">
      序号 : {{index}}, 书名 ; {{book.name}}, 价格 : {{book.price}}
    </li>
  </ul>

<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
      searchText: '',
      books: [
        {name: 'Vue.js', price:50},
        {name: 'Javascript', price:30},
        {name: 'Css', price:40},
        {name: 'Html', price:60}
      ]
    },
    // 计算属性
    computed: {
      filterBooks () {
        const {searchText, books, orderType} = this
        let filterArr = new Array();

        // 过滤数组
        filterArr = books.filter(p => p.name.indexOf(searchText) !== -1)

        return filterArr;
      }
    }
  })

运行结果:

输入框键入字符s,对书名字段进行数据过滤,输出命中条目:

分析Demo:

data中books数组为原始数据
input中通过v-model="searchText"使输入框value值和data中searchText形成绑定关系
view中并没有直接渲染books数组中的数据,而是使用了计算属性filterBooks返回的新数组
通过filterBooks返回过滤后的新数组并对其进行页面渲染,完成过滤功能

基于计算属性的缓存原理,当计算属性所依赖的数据发生变化时,它才会重新执行
所以,当页面输入导致searchText变化时,触发计算属性filterBooks会重新执行
对books数据进行重新过滤并刷新页面显示,实现动态过滤数据功能

过滤数组核心代码:

filterArr = books.filter(p => p.name.indexOf(searchText) !== -1)
通过indexOf方法判断是否包含指定字符串,由filter方法返回新数组
此时books数组中的数据并没有被改变

---

三,列表的排序

在上边实现了过滤功能的列表中,为其添加排序功能,使其可以按照价格进行排序处理

<div id="app">

  <input type="text" v-model="searchText">

  <ul>
    <li v-for="(book, index) in filterBooks" :key="index">
      序号 : {{index}}, 书名 ; {{book.name}}, 价格 : {{book.price}}
    </li>
  </ul>

  <div>
    <button @click="setOrderType(2)">价格升序</button>
    <button @click="setOrderType(1)">价格降序</button>
    <button @click="setOrderType(0)">原始顺序</button>
  </div>

</div>

<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
      searchText: '',
      orderType: 0, // 0:默认顺序, 1:价格降序, 2:价格升序
      books: [
        {name: 'Vue.js', price:50},
        {name: 'Javascript', price:30},
        {name: 'Css', price:40},
        {name: 'Html', price:60}
      ]
    },
    computed: {
      filterBooks () {
        const {searchText, books, orderType} = this
        let filterArr = new Array();

        // 过滤数组
        filterArr = books.filter(p => p.name.indexOf(searchText) !== -1)

        // 排序
        if(orderType) {
          filterArr.sort(function (p1, p2) {
            if(orderType === 1) { // 降序
              return p2.price - p1.price;
            } else { // 升序
              return p1.price - p2.price;
            }
          })
        }

        return filterArr;
      }
    },
    methods: {
      setOrderType (orderType) {
        this.orderType = orderType
      }
    }
  })
</script>

运行结果:

在列表过滤代码的基础上,为其添加了按照价格升序,降序,默认排序功能
在data中定义了orderType属性,区分并标记当前排序类型
并在methods中新增了setOrderType 方法,以通过按钮对排序类型进行设置

当点击升序排序时:

在对数组进行过滤的计算方法中,对过滤后的数组使用sort方法进行排序
并通过按钮设置的orderType值决定升序,降序和不排序

由于orderType的加入,使得计算方法filterBooks 依赖于orderType
当点击按钮致使orderType发生变化时,计算方法filterBooks 重新执行,并更新页面显示

降序和不排序以及过滤后再排序的情况不再做过多演示…

实现排序的核心代码:

主要依赖sort方法对数组进行排序:
filterArr.sort(function (p1, p2) {
  if(orderType === 1) { // 降序
    return p2.price - p1.price;
  } else { // 升序
    return p1.price - p2.price;
  }
})

---

四,结束

列表的过滤和排序就说到这里,大多数的过滤排序都是这种做法
在对列表的排序和过滤中,使用到了计算属性,而计算属性又会涉及到和方法属性的对比
所以下一篇介绍Vue的methods选项,方法和事件,还有v-on的各种修饰符

之后再介绍计算属性computed,以及methods和computed的区别
再往后应该是v-bind及class与style的绑定

等到所有的指令都介绍完毕,会简单总结一下属性的选择和性能优化

把生命周期放到最后,是想通过前面的介绍先对Vue的使用有个大概了解
感觉这样在介绍生命周期会好理解一些吧