vuejs怎么通過filterBy和orderBy實現(xiàn)搜索篩選、降序排序數(shù)據(jù)

本篇內(nèi)容主要講解“vuejs怎么通過filterBy和orderBy實現(xiàn)搜索篩選、降序排序數(shù)據(jù)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習“vuejs怎么通過filterBy和orderBy實現(xiàn)搜索篩選、降序排序數(shù)據(jù)”吧!

成都創(chuàng)新互聯(lián)公司作為成都網(wǎng)站建設(shè)公司，專注成都網(wǎng)站建設(shè)公司、網(wǎng)站設(shè)計，有關(guān)企業(yè)網(wǎng)站設(shè)計方案、改版、費用等問題，行業(yè)涉及成都茶樓設(shè)計等多個領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認可。

先上輸入前的樣子：

vuejs怎么通過filterBy和orderBy實現(xiàn)搜索篩選、降序排序數(shù)據(jù)

<style>
#example{margin:100px auto;width:600px;}
.show{margin:10px;}
#searchText{display: block;margin:0 auto 10px;height:24px;line-height: 24px;width:200px;}
.content ul li{text-align: center;}
.content ul li span{display: inline-block;width:150px;font-size:15px;color:#000;}
</style>
</head>
<body>
<div id="example">
 <input type="text" id="searchText" placeholder="搜索id或者姓名" v-model="searchData"/>
 <div class="content">
  <ul>
   <li v-for="item in items | filterBy searchData in 'id' 'name' | orderBy 'name' '-1'">
    <span>{{item.id}}</span>
    <span>{{item.name}}</span>
    <span>{{item.time}}</span>
   </li>
  </ul>
 </div>
</div>
<script>
 var example1 = new Vue({
  el: '#example',
  data: {
   searchData:'',
  items: [
   {id:'1008',name:'濤濤',time:'20170207'},
   {id:'1098',name:'合同',time:'20170213'},
   {id:'1107',name:'曉麗',time:'20170304'},
   {id:'1004',name:'小蘭',time:'20170112'},
   {id:'1102',name:'財務(wù)',time:'20170203'},
   {id:'1108',name:'哈哈',time:'20170208'},
   {id:'1345',name:'測試',time:'20170201'},
  ] 
  },
  ready:function(){
   
  },
  watch:{
   items:{
    handler:function(val,oldval){
     
    },
    deep:true
   }
  },
  
  methods:{
   
  }
 })
</script>

當在輸入框中輸入'合同'，得到結(jié)果如圖:

vuejs怎么通過filterBy和orderBy實現(xiàn)搜索篩選、降序排序數(shù)據(jù)

到此，相信大家對“vuejs怎么通過filterBy和orderBy實現(xiàn)搜索篩選、降序排序數(shù)據(jù)”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習！

當前名稱：vuejs怎么通過filterBy和orderBy實現(xiàn)搜索篩選、降序排序數(shù)據(jù)
本文來源：http://bm7419.com/article40/isgjho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、App開發(fā)、品牌網(wǎng)站設(shè)計、微信小程序、虛擬主機、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司