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

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

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

先上輸入前的樣子：

<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:'財(cái)務(wù)',time:'20170203'},
   {id:'1108',name:'哈哈',time:'20170208'},
   {id:'1345',name:'測(cè)試',time:'20170201'},
  ] 
  },
  ready:function(){
   
  },
  watch:{
   items:{
    handler:function(val,oldval){
     
    },
    deep:true
   }
  },
  
  methods:{
   
  }
 })
</script>

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

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

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

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

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

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

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

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

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