vue常用过滤器

来源：互联网发布：人工智能的智能含义编辑：程序博客网时间：2024/06/09 17:32

写法：{{ 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>

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

0 0