过滤器的功能是对要显示的数据进行格式化后再显示，其并没有改变原本的数据，只是产生新的对应的数据
过滤器，其实不是必须要用的东西，它只是vue给我们提供的新的数据处理方式，过滤器能做到的，用计算属性，methods方法，依然可以实现。
案例1：（过滤器简单使用）
{
{str | strChange}}
上图中 A为参数（要被处理的数据）B为过滤器，中间通过管道符（‘ | ’）连接 ，管道符两边有空格分离（‘我觉得就是一个规范，因为去掉两边的空格，依然可以运行’）。
过滤器其实也是按照函数来写的，过滤器写在filters下，与data ，methods等同一级。如图B就是过滤器，定义在filters内,图中A作为参数传递给B，然后B return出一个结果，将整个C替换掉。注意，strChange中的value为参数A 并不是从data中直接拿到的。
效果1：
案例2：（过滤器带参数）
{
{str | strChange('加油 China !')}}
‘加油 China !’ 为参数，但是在过滤器中，第一个参数永远是管道符前边的这个参数（‘要被处理的数据’）
效果2：
案例3：（串联）
{
{ message | filterA | filterB }}
过滤器串联是按顺序来进行编译的，A作为参数给filterA，return出结果替换掉B，B作为参数给filterB，return出结果替换掉C。
效果3：
案例4：（局部/全局过滤器）
1.新建filter文件夹，添加filter.js文件：
2.添加到Vue全局中，在main.js中引入,并且添加：
3.在组件中就可以直接使用了：
{
{ message | myfilter}}
输入：
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
效果4：
案例5：(简单应用)
通过一个 Day.js 这个轻量的处理时间和日期的 JavaScript 库，来快速掌握过滤器的使用。
我是要在 Node.js 项目中使用 Day.js，使用 NPM 安装：
npm install dayjs
然后在项目代码中引入即可：
var dayjs = require(‘dayjs’)
//import dayjs from ‘dayjs’ // ES 2015
dayjs().format()
显示格式化后的时间:
计算属性：{
{nowTime}}
methods实现：{
{getNowTime()}}
过滤器：{
{time | timeFormater}}
过滤器（传参）：{
{time | timeFormater('YYYY-MM-DD')}}
str参数这种写法是es6中的写法 ，即没有传这个参数时，默认是等号后边规定的值，有参数，就按照所传参数的值来操作。
效果5：
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/226041.html原文链接：https://javaforall.net
