vue之过滤器

一、什么是过滤器？

过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。

二、过滤器的使用

1、定义过滤器

全局过滤器

Vue.filter('过滤器名称', function (value1[,value2,...] ) {  

//逻辑代码

})

局部过滤器

new Vue({       
 filters: {      
    '过滤器名称': function (value1[,value2,...] ) { 
       // 逻辑代码     
      } 
         }    
　　})

过滤器使用的地方

1,双花括号插值
2,v-bind表达式

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

<div>{{数据属性名称 | 过滤器名称}}</div>
<div>{{数据属性名称 | 过滤器名称(参数值)}}</div>

<div v-bind:id="数据属性名称 | 过滤器名称"></div>
<div v-bind:id="数据属性名称 | 过滤器名称(参数值)"></div>

三、实例

1、传递一个参数的全局过滤器

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

//全局过滤器，将信息转成大写  注意，是在vue 实列生产之前
  Vue.filter('capitalize', function (value) {
    //value左边那个属性值
    return value.toUpperCase()

  })

  const vue = new Vue({
            el: '#app', //挂载 
})

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>