vue常用过滤器

写法：{{ message | ‘过滤器’}}
1：{{message | capitalize}} 首字母大写，
2：{{message | uppercase}} 全部大写，
3： {{message | lowercase}} 全部小写，
4：@click=“show| debounce 2000” 延迟2秒执行，

<div id="box">
        <input type="text" @keyup="show | debounce 2000">
        <div>{{ message | uppercase }}</div>
    </div>
    <script>

        var vm=new Vue({
            data:{
                message :'abc'
            },
            methods:{
                show:function(){
                    alert(1);
                }
            }
        }).$mount('#box');

    </script>

5：filterBy 过滤器
需要在 v-for 里面使用

<div id="box">
        <input type="text" v-model="a">
        <ul>
            <li v-for="val in arr | filterBy a">
                {{val}}
            </li>
        </ul>
    </div>
    <script>

        var vm=new Vue({
            data:{
                arr:['width','height','background','orange'],
                a:''
            },
            methods:{

            }
        }).$mount('#box');

    </script>
    //一个简单的过滤框  输入什么就把数过滤出来。

6：limitBy
需要在 v-for 里面使用
后面能加两个参数 感觉好像是 js的splice()一样

 <div id="box">
        <ul>
            <li v-for="val in arr | limitBy 5 3">
                {{val}}
            </li>
        </ul>
    </div>
    <script>

        var vm=new Vue({
            data:{
                arr:[1,2,3,4,5]
            },
            methods:{

            }
        }).$mount('#box');

    </script>
    //显示的是4,5

7：orderBy 控制排序的 正常的>=0 倒序的<0

 <input type="text" id="searchText" placeholder="搜索id或者姓名" v-model="searchData"/>
    <div class="content">
        <ul>
            <li v-for="arr in items | filterBy searchData in 'id' 'name' 'time' | orderBy 'name' '-1'">
                <span>{{arr.id}}</span>
                <span>{{arr.name}}</span>
                <span>{{arr.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'},
            ]
        },
        watch:({
            items:{
                handler:function(val,oldval){

                },

            }
        },{deep:true})
    })
</script>

一个简单的筛选，降序排序数据实例