Vue自定义过滤器

1、语法

//js
Vue.fiflter('过滤器名称',过滤器函数)
//html
<h2>{{data | 过滤器名称(参数) }}</h2>

这里的参数没有可以不写

2、定义过滤器(全局)

例1：

//例如定义一个过滤器，作用是如果这个数小于10，比如说是8，就显示成08，如果大于10 就正常显示
//js,这是一个全局方法
<script>
    Vue.fiflter('number',function(data){
        return data<10?'0'+data:data
    })

    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
</script>
//html
<h2>{{8 | number}}</h2>  //08
<h2>{{18 | number}}</h2>  //18

例2：

//例如定义一个过滤器，将一个数保留指定位数的小数
//js,这是一个全局方法
<script>
 Vue.fiflter('number',function(data,n){
      console.log(data)  //18.67868
      console.log(n)  //3
      return data.toFixed(n)
 })

 var app = new Vue({
    el: '#app',
    data: {
       message: 'Hello Vue!'
    }
</script>
//html
<h2>{{18.67868 | number(3)}}</h2>  //18.679
这里的参数可以传多个

3、定义过滤器(局部)

//例如定义一个过滤器，将一个数保留指定位数的小数
//js,这是一个全局方法
<script>
 var app = new Vue({
    el: '#app',
    data: {
       message: 'Hello Vue!'
    }，
    filter:{
        number:function(data,n){
            console.log(data)  //18.67868
            console.log(n)  //3
            return data.toFixed(n)
        }
    }
</script>
//html
<h2>{{18.67868 | number(3)}}</h2>  //18.679
这里的参数可以传多个