vue过滤器

vue过滤器

一、总结

一句话总结：

过滤器模板使用：<span>{{value1|multiple(value2,value3)}}</span>

局部过滤器定义：filters: {'multiple': function (value1, value2, value3) {return value1*value2*value3}}

<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>

 

 

二、vue之过滤器

转自或参考：vue之过滤器
https://www.cnblogs.com/shenjianping/p/11330126.html

一、什么是过滤器？

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

二、过滤器的使用

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>