Vue - 过滤器

1、内部过滤器

1)：字母操作: ---- 针对字符串

A:capitalize

B:uppercase

C:lowercase

 

2):json过ingfy滤器，可将表达式的值转化为Json字符串，本质上是ISON.stringfy()，接受一个Number参数，用于决定转化后的JSON字符串的缩进距离，不输默认是2

 <pre>{{didifamily | json 4}}</pre> 

 

3):limitBy,filterBy,orderBy处理并返回过滤后的数组，注意：该3个过滤器处理的表达式必须是数组

limitBy：

<!-- limitBy 限制数组为开始的前N个元素 -->
<!-- N由前一个参数决定，后一个参数可选，用于指定开始的偏移量，默认是0 -->

<!-- 只显示开始的前10个参数 -->
<div v-for="item in items | limitBy 10"></div>

<!-- 显示第5到15个元素 -->
<div v-for="item in items | limitBy 10 5"></div>

------------------------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------------------

 filterBy：

A：使用静态参数

<!-- 字符串 -->
<div v-for="item in items | filterBy 'hello'"></div>

<!-- 单个对象 -->
<div v-for="item in items | filterBy 'hello' in 'name'"></div>

<!-- 多个对象，用空格分离 -->
<div v-for="item in items | filterBy 'hello' in 'name' 'nickname'"></div>

<!-- 数组 -->
<!-- fileds = ['a','b'] -->
<div v-for="item in items | filterBy 'a' in fileds"></div>

B：使用动态数值作为搜索条件

<div id="filter">
    <input v-model="name">

    <ul>
        <li v-for="user in users | filterBy name in 'name">{{user.name}}</li>
    </ul>
</div>

<script type="text/javascript">
    new Vue({
        el : '#filter',

        data : {
            name : '',
            user : [
                {name : 'a'},
                {name : 'b'}
            ]
        }
    })
</script>

------------------------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------------------

orderBy：

<!-- 传入参数为字符串，可同时按照多个字符串，字符串之间用空格隔开 -->
<ul>
    <li v-for="user in users | orderBy 'a' 'b' 'c'">
        {{user.a}} {{user.b}} {{user.c}}
    </li>
</ul>

<!-- 将参数存入数组中 -->
<!-- sort = ['a','b','c'] -->
<ul>
    <li v-for="user in users | orderBy sort">
        {{user.a}} {{user.b}} {{user.c}}
    </li>
</ul>

 

4):current过滤器：将数值转化为货币形式输出，第一个参数接受类型为string，默认值是$  ;  第二个参数接受类型为Number的小数位，如不输入默认是2

注意：第一个参数采取默认，而第二个参数需要修改小数位，则第一个参数不省略，一定要填上，即使是默认也要填上

 {{amout | current}} {{amout | current '$'}} {{amout | current '$' 3}} 

 

5):debounce过滤器

 

2、自定义过滤器

1):定义：Vue.filter(ID,function(){})

 

2):单个参数

<span v-text="message | reverse"></span>

<script type="text/javascript">
    Vue.filter('reverse',function(value){
        return value.split('').reverse().join('');
    })
</script>

 

3):多参数

<span v-text="message | wrap 'before' 'after' "></span>
<!-- hello -->   ==> 'before hello after'

<script type="text/javascript">
    Vue.filter('wrap',function(value,begin,end){
        return begin + value + end
    })
</script>

 

4):动态参数：如果过滤器没有用引号包裹，则他会在当前VM的作用域内动态计算  ， 过滤器函数的this始终指向调用它的VM

 

3、过滤器：

1):自定义filter可以写在全局下：

 

2):使用orderBy以及filterBy进行过滤的时候，如果将$index作为参数，那么$index是根据过滤后的顺序