Vue filters,vue.filter在vue中的使用
滤波器滤波器是Vue的一个常见知识点。我将带您通过时间戳转换的例子来快速理解过滤器的用法。有兴趣的朋友来看看吧。
目录
一、快速识别的概念：二。本地过滤器：III。全局过滤器：IV。扩展：五、总结：本文分享自华为云社区《三分钟掌握Vue过滤器filters及时间戳转换》，北极光之夜。
一.速识概念：
大家好，Vue的滤镜滤镜是一个常见的知识点。下面，我就带大家通过时间戳转换的例子来快速了解过滤器的用法~
官方上，Vue.js允许你自定义过滤器，可以用于一些常见的文本格式。过滤器可以用在两个地方：双花括号插值和v-bind表达式(后者从2.1.0开始支持)。过滤器应该添加在JavaScript表达式的末尾，用“管道”符号表示。
简单来说，在filters filter中定义一个处理函数，在管道符号“”后写函数名，它会处理管道符号“”前的自定义数据，其中自定义数据会自动成为filter函数的参数。
！-在双花括号里-
{{邮件大写}}
！-在“v-bind”
div v-bind:id= rawId formatId /div
过滤器可分为局部过滤器和全局过滤器。详见下文。
二.局部过滤器：
1.本地过滤器是在组件的选项中定义的本地过滤器，并且只能使用该组件。在我们一般的开发中，时间后端一般只返回一个时间戳让前端自己处理。例如，定义一个将时间戳转换为日期格式的过滤器(注意步骤):
模板
差异
！-4.呈现数据并设置过滤器-
{{ times conversion }}
/div
/模板
脚本
导出默认值{
data() {
返回{
//1.模拟一个时间戳数据。
次数：1616959086000，
};
},
//2.定义过滤器
过滤器：{
//3.定义一个处理函数，参数值是要处理的数据
转换：函数(值){
//调用Date的方法来处理时间戳。
返回新日期(值)。toLocaleString()；
},
},
};
/脚本
因此，转换是成功的：
2.不仅如此，过滤器还可以串联，这意味着可以定义多个过滤器。比如如下，相当于先用转换函数处理次数的数据得到结果，再用againChange函数继续处理前一个结果得到最终结果：
{ { times conversion again change } }
基本演示如下：
模板
差异
！-5.把过滤器-
{ { times conversion again change } }
/div
/模板
脚本
导出默认值{
data() {
返回{
//1.模拟一个时间戳数据。
次数：1616959086000，
};
},
//2.定义过滤器
过滤器：{
//3.定义一个处理函数，参数值是要处理的数据
转换：函数(值){
//调用Date的方法来处理时间戳。
返回新日期(值)。toLocaleString()；
},
//4.定义另一个过滤器，并在数据前添加“时间是：”字样。
againChange:函数(值){
return time is: value；
},
},
};
/脚本
3.同时，过滤器也可以接收参数。比如我们改进第一个点的例子，把时间戳转换成可以指定格式的时间格式，用想要的时间格式作为过滤参数。具体用法如下(注意步骤):
模板
差异
！-4.放过滤器，同时传递参数，以指定格式返回时间-
{ { times conversion( yyyy-mm-DD hh:mm:ss week w )} }
/div
/模板
脚本
导出默认值{
data() {
返回{
//1.模拟一个时间戳数据。
次数：1616959086000，
};
},
//2.定义过滤器
过滤器：{
//3.定义一个处理函数，参数值是要处理的数据，格式是传入参数。
转换：函数(值，格式){
//这个转换方法就不介绍了，看看就知道了，滤镜用法是主要方法。
var date=新日期(值)；
函数addZero(日期){
如果(日期10) {
返回“0”日期；
}
返回日期；
}
let getTime={
yyyy: date.getFullYear()，
yy: date.getFullYear() % 100，
MM: addZero(date.getMonth() 1)，
M: date.getMonth() 1，
dd: addZero(date.getDate())，
d: date.getDate()，
HH: addZero(date.getHours())，
H: date.getHours()，
hh: addZero(date.getHours() % 12)，
h: date.getHours() % 12，
mm: addZero(date.getMinutes())，
m: date.getMinutes()，
ss: addZero(date.getSeconds())，
s: date.getSeconds()，
w: (function () {
Let=[天，一，二，三，四，五，六]；
返回一个[date . getday()]；
})(),
};
为了(让我及时加入){
format=format.replace(i，getTime[I])；
}
返回格式；
},
},
};
/脚本
结果如下：
三.全局过滤器：
因为它被称为全局的，所以在创建Vue实例之前全局定义过滤器是很自然的。配置后，所有组件都可以直接使用。通常在自定义文件中定义。比如上面处理时间戳的过滤器，用法如下：
1.在src目录中定义filters文件夹，同时在文件夹中定义filters.js文件：
2.2.filters.js文件代码如下：
常数转换=函数(值，格式){
var date=新日期(值)；
函数addZero(日期){
如果(日期10) {
返回“0”日期；
}
返回日期；
}
let getTime={
yyyy: date.getFullYear()，
yy: date.getFullYear() % 100，
MM: addZero(date.getMonth() 1)，
M: date.getMonth() 1，
dd: addZero(date.getDate())，
d: date.getDate()，
HH: addZero(date.getHours())，
H: date.getHours()，
hh: addZero(date.getHours() % 12)，
h: date.getHours() % 12，
mm: addZero(date.getMinutes())，
m: date.getMinutes()，
ss: addZero(date.getSeconds())，
s: date.getSeconds()，
w: (function () {
Let=[天，一，二，三，四，五，六]；
返回一个[date . getday()]；
})(),
};
为了(让我及时加入){
format=format.replace(i，getTime[I])；
}
返回格式；
}
导出{
转换//在此导出方法
}
3.在main.js中引入全局过滤器：
设置全局滤镜格式为vue.filter(滤镜名称，对应处理函数)；
从“”导入{conversion}。/filters/filters.js
Vue.filter(conversion ，转换)；
4.它可以直接用在组件中：
模板
差异
！-2.放置过滤器并同时传递参数，对于指定的格式时间-
{ { times conversion( yyyy-mm-DD hh:mm:ss week w )} }
/div
/模板
脚本
导出默认值{
data() {
返回{
//1.模拟一个时间戳数据。
次数：1616959086000，
};
},
};
/脚本
相同的结果：
四.扩展：
可以发现filters过滤器在用法上和calculated属性有些类似，那么两者有什么区别呢？
过滤器可以传递参数，但不能访问参数。没有缓存功能。同时，过滤器可以串联连接。它可以在本地和全局设置。Filter相对简单，只在显式调用时触发，一般应用于模板渲染。
Computed不能传参数，但是可以访问这个，针对变量的运算。其背后的处理逻辑复杂，具有缓存能力，在组件上更具通用性，适用于复杂的数据转换、统计等场景。
五.总结：
这就是filters过滤器的一般内容。一般来说，过滤器过滤器可以分为局部过滤器和全局过滤器。局部过滤器在组件中有效，全局过滤器在每个组件中都有效。其中，可以为过滤器设置多个过滤器和参数。通用过滤器用于一些简单的数据渲染。
这就是本文关于Vue过滤器和时间戳转换的内容。有关Vue过滤器时间戳转换的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。