vue filter使用,vue filters
vue中滤镜的功能可以用于一些常见的文本格式化，即修改文本，但文本的内容不会改变。下面这篇文章主要介绍了VUE滤镜的两种用法，有需要的朋友可以参考一下。
目录
前言1。单个安装全局过滤器。批量安装全局过滤器2。组件过滤器附件：传入过滤器的多个参数的摘要。
前言
Vue.js允许我们自定义过滤器，可以用于一些常见的文本格式。过滤器可以用在两个地方：双花括号({undefined{ })插值和v-bind表达式(后者从2.1.0开始支持)。过滤器应该添加在JavaScript表达式的末尾，用“管道”符号表示。
！-在双花括号里-
div { { message capital } }/div
！-在“v-bind”
div v-bind:id= rawId formatId /div
一、全局过滤器
定义一个全局过滤器很简单，你只需要导出一个方法。
用起来很简单。你只需要在导入文件中全局引入这个过滤器，使用Vue.filter(key，value)引入即可。
例如，如果Java backend返回的时间戳精确到秒，而JS中的时间戳以毫秒表示，则可以定义一个全局过滤器来转换时间戳：
//main.js
从“vue”导入Vue
Vue.filter(毫秒，(值)={
如果(！值)返回“”
value=value.toString()
返回值. charAt(0)。toUpperCase() value.slice(1)
})
在需要使用的组件中使用：
div{{1516101106 毫秒}}/div
全局过滤器之单一挂载
/**
* dateTmp:要筛选的值
* fmtTmp:参数传入，可以接收多个参数。
*/
模板
！- 2021-12-20 19:14:18 -
div { { 1639998858000 date format( yyyy/MM/DD HH:MM:ss )} }/div
/模板
Vue.filter(dateFormat ，function (dateTmp，fmtTmp) {
设fmt=fmtTmp
let date=dateTmp
如果(！fmt) {
fmt=yyyy。嗯. dd
}
如果(！(日期的日期实例)){
日期=新日期(日期)
}
让o={
M : date.getMonth() 1，//month
D : date.getDate()，//day
h : date.getHours() % 12==0？12: date.getHours()% 12，//小时
H : date.getHours()，//小时
M : date.getMinutes()，//分钟
S : date.getSeconds()，//秒
q :math . floor((date . getmonth()3)/3)，//quarter
S: date.getMilliseconds() //毫秒
}
让week={
0 :天，
1 :一，
2: 2,
3 :三，
4: 4,
5: 5,
6: 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)？(RegExp。$1 .长度2？Week: week ): )周[date.getDay() ])
}
for (var k in o) {
if(new RegExp(( k ))。测试(fmt)) {
fmt=fmt.replace(正则表达式。$1，(正则表达式。$1.length==1)？(o[k]) : ((00 o[k])。substr(( o[k])。长度)))
}
}
返回fmt
});
全局过滤器之批量挂载
//定义方法
//filter . js
导出功能片(温度，数量){
返回temp.slice(0，num)；
}
//挂载
//main.js
从“@/assets/js/filters”导入*作为过滤器；
Object.keys(过滤器)。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() {
返回{
Msg:“我想被过滤”，
};
},
过滤器：{
集合大小(值){
if (value.length 4) {
返回值. splice(0，4) . ；
}否则{
返回值；
}
},
},
};
/脚本
附：过滤器中传入多个参数
过滤器是一个JavaScript函数，因此它可以接收参数：
{{ message filterA(arg1 ，arg2) }}
这里，filterA被定义为接收三个参数的过滤函数。message的值是第一个参数，普通字符串“arg1”是第二个参数，表达式arg2的值是第三个参数。
模板
测试
！-要过滤的数据总是第一个参数；通过过滤函数，传递的参数依次排在后面。-
p { { new Date() filter _ Date format } }/p
p { { new Date() filter _ Date format( YYYY-MM-DD )} }/p
p { { new Date() filter _ Date format( YYYY-MM-DD ，count) }}/p
/div
/模板
script src= https://cdn . bootcss . com/moment . js/2 . 24 . 0/moment . js /script
脚本
导出默认值{
data() {
返回{
计数：10
};
},
过滤器：{
filter_dateFormat(日期、格式、计数){
返回(
时刻(日期)。格式(格式 YYYY-MM-DD HH:mm:ss )
(算吗？-计数： )
);
}
}
};
/脚本
style lang=scss 范围。测试{
颜色：黑色；
}
/风格
总结
这就是这篇关于过滤器在VUE的两种用途的文章。有关VUEfilters用法的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。