首页 > 编程语言 > 详细

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

时间:2017-02-09 19:21:42      阅读:701      评论:0      收藏:0      [点我收藏+]

直接贴代码了:

先上输入前的样子:

技术分享

<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:‘财务‘,time:‘20170203‘},
            {id:‘1108‘,name:‘哈哈‘,time:‘20170208‘},
            {id:‘1345‘,name:‘测试‘,time:‘20170201‘},
        ]    
      },
       ready:function(){
            
        },
        watch:{
            items:{
                handler:function(val,oldval){
                    
                },
                deep:true
            }
        },
        
        methods:{
            
        }
    })
</script>

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

技术分享

 

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

原文:http://www.cnblogs.com/moqiutao/p/6383318.html

踩
(0)
赞
(0)
   
举报
评论 一句话评论(0)
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!