vue filter使用,Vue filters
这篇文章主要介绍了VUE中的过滤过滤器使用方法，文章主要通过描述全局过滤器、全局过滤器之单一挂载、全局过滤器之批量挂载、组件过滤器展开内容，具有一定的参考价值组要的小伙伴可以参考一下
目录
前言一、全局过滤器1、全局过滤器之单一挂载2、全局过滤器之批量挂载二、组件过滤器
前言
vue。j允许我们自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号({未定义{ })插值和v型装订表达式（后者从2.1.0 开始支持)。过滤器应该被添加在Java脚本语言表达式的尾部，由"管道"符号指示。
！-在双花括号中-
div { { message capital } }/div
！-在“虚拟绑定”中-
div v-bind:id= rawId formatId /div
一、全局过滤器
定义一个全局过滤器很简单，只需要导出一个方法即可。
使用的时候很简单，只需要在入口文件全局引入此过滤器即可，使用Vue .过滤器(键，值)引入。
比如，Java后端返回的时间戳精确到秒，而射流研究…中的时间戳是用毫秒表示，则可以定义一个转换时间戳的全局过滤器：
//main.js
从“vue”导入某视频剪辑软件
Vue.filter(毫秒,(值)=gt{
如果(!值)返回""
value=value.toString()
返回值。charAt(0).toUpperCase() value.slice(1)
})
在需要使用的组件使用：
div{{1516101106 毫秒} }/分区
1、全局过滤器之单一挂载
/**
*日期：要过滤的值
* fmtTmp:传入的参数，可接收多个参数
*/
模板
！- 2021-12-20 19:14:18 -
div { { 1639998858000 日期格式( yyyy/MM/DD HH:MM:ss )} }/div
/模板
Vue.filter(dateFormat ，function (dateTmp，fmtTmp) {
设fmt=fmtTmp
let date=dateTmp
如果(!fmt) {
yyyy .嗯。dd
}
如果(!（日期的日期实例)){
日期=新日期（日期)
}
让o={
M : date.getMonth() 1，//月份
d : date.getDate()，//日
h : date.getHours() % 12==0？12 : date.getHours() % 12，//小时
H : date.getHours()，//小时
m : date.getMinutes()，//分
s : date.getSeconds()，//秒
问：数学。楼层((日期。getmonth()3)/3)，//季度
S: date.getMilliseconds() //毫秒
}
让周={
0: 日，
1: 一，
2: 二，
3: 三，
4: 四，
5: 五，
6: 六
}
if (/(y )/.测试(fmt)) {
fmt=fmt.replace(正则表达式1美元，(date.getFullYear() ).substr(4 - RegExp .$1.length))
}
if (/(E )/.测试(fmt)) {
fmt=fmt.replace(正则表达式$1，((RegExp .$1 .长度1)?(正则表达式.$1 .长度2?星期 : 周) : )周[date.getDay() ])
}
for (var k in o) {
if(new RegExp(( k )).测试(fmt)) {
fmt=fmt.replace(正则表达式。$1,(正则表达式. length==1)？(o[k]) : ((00 o[k]).substr(( o[k]).长度)))
}
}
返回滤波多音
});
2、全局过滤器之批量挂载
//定义方法
//过滤器。射流研究…
导出功能片（温度，数量){
返回temp.slice(0，数字)；
}
//挂载
//main.js
从" @/assets/js/filters "导入*作为过滤器；
对象.键(过滤器)。forEach(key={
Vue.filter(key，filters[key])；
});
//调用
！- 1234 -
div{{ 123456 slice(4) }} /div
二、组件过滤器
组件过滤器更简单，只需在对应组件中定义过滤即可，不过只针对本组件有效。
比如定义一个首字母大写的过滤器：
//定义方法
导出默认值{
过滤器：{
大写：函数（值){
如果(!值)返回""
value=value.toString()
返回值。charAt(0).toUpperCase() value.slice(1)
}
}
}
例子：
模板
！-我要被过.-
div{{ msg setSize }}/div
/模板
脚本
导出默认值{
data() {
返回{
消息： 我要被过滤，
};
},
过滤器：{
集合大小（值){
if (value.length 4) {
返回值。拼接(0，4) . ；
}否则{
返回值；
}
},
},
};
/脚本
这就是这篇关于VUE使用过滤器的文章。有关过滤器的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。