欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2019年09月27日 10:34:51   作者：小羽向前跑  
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表格過濾功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)表格過濾功能的具體代碼，供大家參考，具體內(nèi)容如下

效果：

組件代碼： 

<template>
 <div>
 <input type="text" v-model="searchText">
 
 <ul>
 <li v-for="(book, index) in filterBooks" :key="index">
  序號(hào) : {{index}}, 書名 ; {{book.name}}, 價(jià)格 : {{book.price}}
 </li>
 </ul>
 
 <div>
 <button @click="setOrderType(2)">價(jià)格升序</button>
 <button @click="setOrderType(1)">價(jià)格降序</button>
 <button @click="setOrderType(0)">原始順序</button>
 </div> 
 </div> 
</template>
 
<script>
 
 
export default {
 name:"filter1",
 
 data () {
 return {
  searchText: '',
  orderType: 0, // 0:默認(rèn)順序, 1:價(jià)格降序, 2:價(jià)格升序
  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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論