过滤器

过滤器：用于数据输出之前的处理，例如给数字添加小数点等。

过滤器分为全局过滤器和私有过滤器，下面先看私有过滤器的使用方法。

私有过滤器

打开 HelloWorld 组件，把默认代码删除，实现这样一个案例：data 中声明 num 变量存入数字 10，在输出 num 时给数字 10 添加 3 位小数，代码如下。

<template>
  <div class="hello">
 //3．竖线又称作管道符，toFixed是过滤器的名字
    <h1>{{ num | toFixed }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
//1．声明变量num
      num: 10
    }
  },
//2．过滤器和data属性、methods属性平级，过滤器属性为filters
  filters: {
    // 表示管道符前面的变量，表示此过滤器要处理哪个数据
    // 过滤器必须有return返回值
    toFixed(val){
      return val.toFixed(3)
    }
  }
}
</script>

代码解析如下。

filters属性用于存放过滤器，和data属性、methods属性平级。
过滤器是一个方法，其第一个参数是固定的，表示要处理的变量，且必须有return属性。
过滤器使用的竖线又称作管道符，竖线后面就是过滤器的名字。

上述代码的运行结果如图7-6所示，给数字10添加3位小数。

Figure 1. 图7-6　使用过滤器添加3位小数

过滤器就是一个方法，方法是可以传递参数的，下面讲解使用过滤器传递参数，代码如下。

视图层代码如下。

<template>
    <div class="hello">
        //3．竖线又称作管道符，toFixed是过滤器名字
        <h1>{{num|toFixed(3,')}}</h1>
    </div>
</template>

过滤器代码如下。

filters: {
    toFixed(val, data1, data2) {
        return data2 + val.toFixed(data1);
    }
}

运行结果如图7-7所示。

Figure 2. 图7-7　过滤器传递$参数

代码解析如下。

过滤器调用时传入两个实参，即 3 和 $，因此过滤器定义需要有两个形参接收。

toFixed(val, data1, data2) 过滤器的第一个参数是不变的，所以两个形参是从第二个参数开始的。

全局过滤器

全局过滤器是在 main.js 中定义的，代码如下。

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

// 全局过滤器
// toFixed1 过滤器名字
// val 过滤器控制的元素
// data 调用过滤器时传递的参数
Vue.filter('toFixed1', function(val, data) {
  return val.toFixed(data)
})

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在 HelloWorld 组件调用全局过滤器，代码如下。

<template>
  <div class="hello">
    //2．为num1使用全局过滤器并传递参数
    <h1>{{ num1 | toFixed1(2) }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      num: 10,
      //1．声明num1
      num1: 20
    };
  },
};
</script>

代码解析如下。

全局过滤器使用 Vue.filter 方法创建，第一个参数是过滤器名字，其调用方法和私有过滤器的调用方法相同。