Vue核心技術-6,列表的過濾和排序

一,前言

上一篇介紹了列表渲染指令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的使用有個大概瞭解
感覺這樣在介紹生命週期會好理解一些吧