vuejs通過filterBy、orderBy實現(xiàn)搜索篩選、降序排序數(shù)據(jù)
更新時間：2020年10月26日 13:24:44 作者：孟然
這篇文章主要為大家詳細(xì)介紹了vuejs通過filterBy、orderBy實現(xiàn)搜索篩選、降序排序數(shù)據(jù)實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vuejs實現(xiàn)搜索篩選、降序排序數(shù)據(jù)的具體代碼，供大家參考，具體內(nèi)容如下
先上輸入前的樣子：
<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>
當(dāng)在輸入框中輸入'合同'，得到結(jié)果如圖:
關(guān)于vue.js組件的教程，請大家點擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
更多vue學(xué)習(xí)教程請閱讀專題《vue實戰(zhàn)教程》
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue Router 是 Vue.js 官方的路由管理器。這篇文章主要介紹了詳解vue-router傳參的兩種方式,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了解決Vue大括號字符換行踩的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要和大家一起學(xué)習(xí)vue.js表單控件綁定操作,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
vue中pinia數(shù)據(jù)一直重復(fù)獲取之前的值的解決方法
這篇文章主要介紹了vue中pinia數(shù)據(jù)一直重復(fù)獲取之前的值的解決方法,如果想讓pinia數(shù)據(jù)不會重復(fù)獲取之前的值需要手動強(qiáng)制觸發(fā) Pinia store 的狀態(tài)更新,文中有詳細(xì)的解決方法,需要的朋友可以參考下2024-04-04
在vue中使用防抖和節(jié)流,防止重復(fù)點擊或重復(fù)上拉加載實例
今天小編就為大家分享一篇在vue中使用防抖和節(jié)流,防止重復(fù)點擊或重復(fù)上拉加載實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
如何解決ElementUI導(dǎo)航欄重復(fù)點菜單報錯問題
這篇文章主要介紹了如何解決ElementUI導(dǎo)航欄重復(fù)點菜單報錯問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
項目遷移vite引入圖片資源報require?is?not?defined問題的解決辦法
這篇文章主要給大家介紹了關(guān)于項目遷移vite引入圖片資源報require?is?not?defined問題的解決辦法,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vite具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
vue利用sync語法糖實現(xiàn)modal彈框的項目實踐
本文主要介紹了vue利用sync語法糖實現(xiàn)modal彈框的項目實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了vue+j簡單的實現(xiàn)輪播效果,滾動公告,銜接,文章圍繞主題的相關(guān)資料展開詳細(xì)的內(nèi)容具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
這篇文章主要介紹了vue 使用post/get 下載導(dǎo)出文件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08