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是根據過濾后的順序