vue.js过滤器知识总结与实例

   刚刚接触vue.js，现在来总结一些我在学习过程中接触过滤器的知识，不足的地方希望大家多多包涵：

1、常见过滤器：uppercase、lowercase、capitalize、currency、debounce(延迟)

      对这些简单的过滤器我们只举一个例子说明：

<div id="box">
    <input type="text" v-model="msg">  <br/>
    {{msg|uppercase}} <br/>   //将字母全部转化成大写
    {{*msg}} <br/>            //加*号表示数据只绑定一次
    {{{msg}}}                 //使得HTML转意输出
</div>
<script>
    new Vue({
        el:"#box",
        data:{
            msg:"hello"
        }
    })
</script>
2、数组配合使用的过滤器：
   1.limitBy 限制数组中显示几个  比如只要求出现两个数字：
<div id="app">
    <ul>
        <li v-for="val in arr|limitBy 2">
            {{val}}
        </li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            arr:[1,2,3,4,5]
        }
</script>
   再增加一些其他情况：<li v-for="val in arr|limitBy 2 3">  表示从第3个数字开始显示，显示2个
   2.filterBy 过滤数据 找出我们需要显示的数字、单词or字母  比如：
    
<div id="app">
   <ul>
       <li v-for="val in arr | filterBy 'o'">
           {{val}}
       </li>
   </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            arr:['apple','banana','orange','lemon']
        }
    })
</script>
   3.orderBy排序，和上面的用法一样，orderBy 1表示正序，-1表示倒序
3、自定义过滤器：在项目开发中vue自带的过滤器不能满足我们的项目要求，我们就得自己定义一个过滤器，比如：
   Vue.filter(name,function(input){});这个自定义一般格式，具体实例如下：
<div id="app">
    {{a|toDou}}
</div>
<script>
    Vue.filter('toDou',function(input){
        return input<10?'0'+input:''+input;
    });
    var app = new Vue({
        el: '#app',
        data: {
           a:'9'
        }
    })
</script>
希望对像我这样刚入门的童鞋有帮助。