vuejs通过filterBy,orderBy实现搜索筛选,降序排序数据实例

前端之家收集整理的这篇文章主要介绍了vuejs通过filterBy,orderBy实现搜索筛选,降序排序数据实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

直接贴代码了:

先上输入前的样子:

<style>
#example{margin:100px auto;width600px}
.show10px
#searchTextdisplay block0 auto 10pxheight24pxline-height 24px200px
.content ul litext-align center
.content ul li span inline-block150pxfont-size15pxcolor#000}
</>
headbodydiv id="example">
    input type="text" id="searchText" placeholder="搜索id或者姓名" v-model="searchData"/>
    class="content">
        ul>
            li v-for="item in items | filterBy searchData in 'id' 'name' | orderBy 'name' '-1'">
                span>{{item.id}}>{{item.name}}>{{item.time}}lidivscript>
    var example1 = new Vue({
      el: '#example,data: {
          searchData:''1008涛涛20170207},{id:1098合同201702131107晓丽201703041004小兰201701121102财务201702031108哈哈201702081345测试20170201function(){
            
        },watch:{
            items:{
                handler:(val,oldval){
                    
                },deep:true
            }
        },methods:{
            
        }
    })
>

当在输入框中输入'合同',得到结果如图:

 

猜你在找的Vue相关文章