vue过滤器

过滤器的作用是用来给文本格式化的，改变文本的格式，在vue的差值表达式中使用，用 |（管道符）连接，并且可以连续使用，一个差值表达式中使用一个或对个过滤器，但后续的过滤器使用的是前面过滤器过滤后的文本

过滤器的创建

过滤器的创建有两种，一种实在mian.js中创建，称为全局过滤器，可以在所有的组件中使用，一种是在页面组件中创建，成为私有过滤器，只能在创建它的组件中使用。

全局过滤器创建

全局过滤器使用Vue.filter()创建

//创建过滤器，名字为setMsg
Vue.filter('setMsg',function(data,format){
	console.log(data) //data是使用过滤器的变量
	console.log(format) //format 是传入的参数
	return data.replace('厉害'，'***')   //将data中的‘厉害’变成‘***’,
})

在页面上显示的return后的数据，
使用方法

//代码就不写全了，只写需要用到的,使用的是vue2
data(){
	return{
		msg:'你太厉害了，太厉害了'
	}
}


<div>{{msg|setMsg(666)}}</div>

页面上显示的就是”你太***了，太厉害了“，控制台打印”你太厉害了，太厉害了“ ”666“，这样就成功了，只替换了第一个厉害是因为replace这个方法只能替换第一个匹配到的字符串

私有过滤器

私有过滤器于data是同级的，所以写到data后

data(){
	return{
	msg:'你太厉害了，太厉害了'
	}
},
//私有过滤器写法
filters:{
	setMsg2(data,format){
		console.log(data) //data是使用过滤器的变量
		console.log(format) //format 是传入的参数
		return data.replaceAll('***', '你真好看')//将所有的'***'替换成'你真好看'
	}
}

使用

<div>{{msg | setMsg(666) | setMsg2(1231)}}</div>

这里于上面的全局过滤器连用，将更改过的信息传给setMsg2,再进行修改

一个修改时间的插件

https://momentjs.cn/
使用的时候，再终端输入 npm install moment 然后回车下载，输入前确保当前目录在项目根目录，下载完成后，在package.json文件中看看有没monment,如果有就下载成功了

使用也很简单，在return后添加想要的款式就可以了，但是需要在组件中导入它

import moment from "moment"