vue之過濾器

一、什么是過濾器？

　　過濾器是對即將顯示的數據做進一步的篩選處理，然后進行顯示，值得注意的是過濾器並沒有改變原來的數據，只是在原數據的基礎上產生新的數據。

二、過濾器的使用

1、定義過濾器

• 全局過濾器

Vue.filter('過濾器名稱', function (value1[,value2,...] ) {  

//邏輯代碼

})

• 局部過濾器

new Vue({       
 filters: {      
    '過濾器名稱': function (value1[,value2,...] ) { 
       // 邏輯代碼     
      } 
         }    
　　})    

2、過濾器使用的地方

　　　　雙花括號插值
　　　　v-bind表達式

過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符號指示

<!-- 在雙花括號中 -->
<div>{{數據屬性名稱 | 過濾器名稱}}</div>
<div>{{數據屬性名稱 | 過濾器名稱(參數值)}}</div>
<!-- 在 `v-bind` 中 -->
<div v-bind:id="數據屬性名稱 | 過濾器名稱"></div>
<div v-bind:id="數據屬性名稱 | 過濾器名稱(參數值)"></div>

三、實例

1、傳遞一個參數的全局過濾器

<div id="app">
    <span>{{msg|capitalize}}</span>//data中聲明msg:'hello'
</div>

 
 //全局過濾器，將信息轉成大寫
  Vue.filter('capitalize', function (value) {
    //value左邊那個屬性值
    return value.toUpperCase()

  })

2、傳遞多個參數的局部過濾器

<div id="app">

    <!--過濾器接收多個參數-->
    <span>{{value1|multiple(value2,value3)}}</span>

</div>

<script>

  var vm = new Vue(
    {
      el: '#app',
      data: {
        msg: 'hello',
        value1:10,
        value2:20,
        value3:30
      },
    //局部過濾器
      filters: {
        'multiple': function (value1, value2, value3) {
          return value1*value2*value3
        }
      }

    }
  )

</script>