Vue过滤器的使用详解(代码实现)

过滤器的功能是对要显示的数据进行格式化后再显示，其并没有改变原本的数据，只是产生新的对应的数据

 过滤器，其实不是必须要用的东西，它只是vue给我们提供的新的数据处理方式，过滤器能做到的，用计算属性，methods方法，依然可以实现

案例1：（过滤器简单使用）

<template>
        <h3>{{str | strChange}}</h3>
</template>
<script>
export default {
  data (){
    return {
      str:'hello world'
    };
  },
  filters:{
    // toUpperCase()方法将英文字母转换为大写
    strChange(value) {
      console.log('value值',value)
       return value.toUpperCase()
    }
  }
}
</script>

上图中 A为参数（要被处理的数据）B为过滤器，中间通过管道符（‘ | ’）连接 ，管道符两边有空格分离（‘我觉得就是一个规范，因为去掉两边的空格，依然可以运行’）

过滤器其实也是按照函数来写的，过滤器写在filters下，与data ，methods等同一级。如图B就是过滤器，定义在filters内,图中A作为参数传递给B，然后B return出一个结果，将整个C替换掉。注意，strChange中的value为参数A 并不是从data中直接拿到的。

效果1：

案例2：（过滤器带参数）

<template>
        <h3>{{str | strChange('加油 China !')}}</h3>
</template>
<script>
export default {
  data (){
    return {str:'hello world'};
  },
  filters:{
    strChange(value,res) {
      console.log('value值:',value,'res值:',res)
       return value+' ! '+res
    }
  }
}
</script>

     '加油 China !' 为参数，但是在过滤器中，第一个参数永远是管道符前边的这个参数（‘要被处理的数据’）

效果2：

案例3：（串联）

<template>
        <h3>{{ message | filterA | filterB }}</h3>
</template>
<script>
export default {
  data (){
    return {message:'hello world'};
  },
  filters:{
    filterA(value){
      return value.slice(0,5)
    },
    filterB(value){
      return value+'，'+'天命爱心职责！'
    }
  }
}
</script>

过滤器串联是按顺序来进行编译的，A作为参数给filterA，return出结果替换掉B，B作为参数给filterB，return出结果替换掉C。

效果3：

案例4：（局部/全局过滤器） 

1.新建filter文件夹，添加filter.js文件：

2.添加到Vue全局中，在main.js中引入,并且添加：

3.在组件中就可以直接使用了：

<template>
    <div>
        <h3>{{ message | myfilter}}</h3>
        输入：<input type="text" v-bind:value='message | myfilter'>
    </div>
</template>
 
<script>
export default {
  data (){
    return {message:'hello world'};
  },
}
</script>

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。 

 效果4：

 案例5：(简单应用)

通过一个 Day.js 这个轻量的处理时间和日期的 JavaScript 库，来快速掌握过滤器的使用。

Node.js 项目中使用 Day.js，使用 NPM 安装：

https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.0/dayjs.min.js

  我是要在 Node.js 项目中使用 Day.js，使用 NPM 安装：

 npm install dayjs

然后在项目代码中引入即可：

var dayjs = require('dayjs')

//import dayjs from 'dayjs' // ES 2015

dayjs().format()

<template>
    <div>
      <h3>显示格式化后的时间:</h3>
			<!-- 计算属性实现 -->
			<h4>计算属性：{{nowTime}}</h4>
			<!-- methods实现 -->
			<h4>methods实现：{{getNowTime()}}</h4>
			<!-- 过滤器实现 -->
			<h4>过滤器：{{time | timeFormater}}</h4>
			<!-- 过滤器实现（传参） -->
			<h4>过滤器（传参）：{{time | timeFormater('YYYY-MM-DD')}}</h4>
    </div>
</template>
<script>
import dayjs from 'dayjs'
export default {
  data (){
    return {
      time:1648106069711//时间戳
    };
  },
  computed: {
				nowTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
	methods: {
				getNowTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			//局部过滤器
	filters:{
				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
					// console.log('value值',value)？
					return dayjs(value).format(str)
				},
			}
}
</script>

str参数这种写法是es6中的写法 ，即没有传这个参数时，默认是等号后边规定的值，有参数，就按照所传参数的值来操作。

效果5：