vue.js过滤器,vue如何定义一个过滤器
本文主要介绍如何使用vue滤镜。对vue感兴趣的同学可以参考一下。
目录
概述定义过滤器过滤器的使用自定义全局过滤器注意事项示例1(本地过滤器)示例2(全局过滤器)
概述
vue2.0之前有内置滤镜。在2.0中，没有内置的过滤器，但是我们可以自定义过滤器。
关于vue滤镜，官方文件中有如下表述：
Vue.js允许你自定义过滤器，可以用于一些常见的文本格式。过滤器可以用在两个地方：双花括号插值和v-bind表达式(后者从2.1.0开始支持)。过滤器应该添加在JavaScript表达式的末尾，用“管道”符号表示。
也就是说，过滤器是用于格式化数据的功能。过滤器不会对原始数据进行修改，它的作用是对数据进行过滤，即对数据进行处理并返回处理后的数据，比如进行一些数据格式的修改、状态转换等。
有两种类型的过滤器。
组件中的过滤器(在组件中有效)
全局过滤器(由所有组件共享)
定义过滤器
第一个参数是过滤器的名称。
第二个参数是过滤器的功能(如果不定义vue，就不会知道这个字符串是什么，是做什么的)。
过滤器的功能函数
声明(数据，参数1，参数2.) {}
第一个参数是要过滤的传入数据，即调用管道符号时管道符号左侧的内容。
第二个参数是调用过滤器时传入的参数。
过滤器的使用
先注册，再使用。
最终数据由组件过滤器中的return返回：{ filter name: fn} fn。
最终数据由全局Vue.filter (filter name ，fn) fn中的return返回
使用{ {数据过滤器名称}}
//使用筛选器时，需要添加管道符号()作为分隔符。管道符号的右边是过滤器名称，这是文本的功能。
！-在双花括号里-
{{邮件过滤器名称}}
！-在“v-bind”
Div-bind: id= id 筛选器名称/div
自定义全局过滤器
Vue.filter (filter name ，function(val) {//val表示要处理的数据。
//过滤业务逻辑，返回值。
})
Div{{邮件过滤器名称}}/div
Div-bind= msg 过滤器名称/div
局部过滤器
data () {
返回{
味精：“你好，世界”
}
},
//定义私有本地筛选器。只能在当前vue对象中使用。
过滤器：{
DataFormat: (msg，a)={//msg表示要过滤的数据，a表示传入的参数。
返回msg a；
}
}
p{{ msg dataFormat(！} }}/p //结果：您好世界！
注意事项
1.全局注册时，过滤器没有s，而组件过滤器是带s的过滤器，虽然写时没有s，也没有报错，但过滤器没有作用。
2.当全局过滤器和局部过滤器名称重复时，会根据邻近原则调用，即先调用局部过滤器，后调用全局过滤器。
3.一个表达式可以使用多个过滤器，执行顺序是从左到右。前一次滤波的结果作为后一次滤波的处理数据，所以要注意使用顺序。
熟悉vue的童鞋会知道，过滤器有时候可以达到和方法、computed、watch一样的数据处理目的，但是因为不能改变原来的值，所以无法替代。如果一个过滤器内部特别复杂，可以考虑把它写成一个计算属性，因为计算属性本身有缓存，可以重用，而过滤器一般是用来做一些简单的操作。
在实际开发中，全局过滤器比局部过滤器应用更广泛。说白了，我们为什么要用滤镜，其实和用函数是一样的。一些方法被封装以供其他组件使用，这使得调用更加方便快捷。
大家知道全局过滤器是在主页。射流研究…中定义的，但万一项目过大，有多个过滤器，那主页。射流研究…就一堆代码，为了项目模块化，最好是有专门的目录来统一存放这些过滤器，然后把处理函数给抽离出去，放在一个。射流研究…文件中，下边通过示例代码展示。
示例一（局部过滤器）
格式化时间或日期，补全指定位数，不足个位数补0
//过滤器/索引。射流研究…文件
导出默认值{
日期格式：值={
常数dt=新日期（值* 1000)
const y=dt.getFullYear()
const m=(dt.getMonth() 1 ).padStart(2， 0) //.padStart(指定位数，要补全的符号或值)
const d=(dt.getDay() ).padStart(2，“0”)
const hh=(dt.getHours() ).padStart(2，“0”)
const mm=(dt.getMinutes() ).padStart(2，“0”)
const ss=(dt.getSeconds() ).padStart(2，“0”)
return " $ { y }-$ { m }-$ { d } $ { hh }:$ { mm }:$ { ss } `返回
}
}
//在。某视频剪辑软件文件中使用局部过滤器
脚本
导入筛选器自./筛选器
导出默认值{
.
过滤器：{.过滤器},
data() {
返回{}
}
}
/脚本
差异日期：{{ date dateFormat }} /div
示例二（全局过滤器）
通用字典项的回显：比如性别男女或通用选择是否，后端传给我们的数据是0、1,我们需要在页面上显示男女或是否
//常量/字典. js文件
导出常量性别_菜单=[
{代码：0,标签: 男},
{代码：1,标签: 女}
];
export const COMMON_MENU=[
{代码：0,标签: 否},
{代码：1,标签: 是}
];
导出默认值{
性别_菜单，普通_菜单
}
过滤器/字典。射流研究…文件
//过滤器/字典。射流研究…文件
从导入字典./常量/字典
导出常量genderMenu={
func: value={
常量目标=字典。性别_菜单。过滤器(item={
返回item.code=value
})
返回目标。长度？目标[0]。标签:值；
}
}
导出常量commonMenu={
func: value={
常量目标=字典COMMON_MENU.filter(item={
返回item.code=value
})
返回目标。长度？目标[0]。标签:值；
}
}
过滤器/索引。射流研究…文件
//过滤器/索引。射流研究…文件
从导入*作为筛选器/dict //导入过滤函数
const Install=Vue={
//导入的过滤是一个对象，使用Object.keys()方法，得到一个由键组成的数组，遍历数据，让键作为全局过滤器的名字，后边的是键对应的处理函数，这样在任何一个组件中都可以使用全局过滤器了
对象.键(过滤器)。forEach(key={
Vue.filter(key，filters[key]).func)
})
/*
对于(过滤器中的常量过滤器){
Vue.filter(`${_filter} `，filters[_filter].func)
} */
}
导出默认安装
主页。射流研究…文件
//main.js文件
.
从导入筛选器。/./筛选器/索引
Vue.use(过滤器)
.
在。某视频剪辑软件文件中使用全局过滤器
//.某视频剪辑软件文件中使用全局过滤器
p性别：{{ gender genderMenu }}/p
以上就是如何使用某视频剪辑软件过滤器过滤器的详细内容，更多关于某视频剪辑软件过滤器过滤器的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。