vue實現(xiàn)表格過濾功能

<template>
 <div>
 <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> 
</template>
 
<script>
 
 
export default {
 name:"filter1",
 
 data () {
 return {
  searchText: '',
  orderType: 0, // 0:默認(rèn)順序, 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();
 
  // 過濾數(shù)組 過濾name鍵
  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>
 
<style>
 
</style>