【Vue2】Filter 过滤器
过滤器案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!--
过滤器(Filters) 是vue为开发者提供的功能，常用于文本的格式化。
过滤器可以用在两个地方:插值表达式和v-bind属性绑定。
过滤器应该被添加在JavaScript表达式的尾部,由“管道符”进行调用,示例代码如下: vue filters中 this指向的不是vue实例，但想要获取vue实例中data中的数据，
可以采用下面方法。在 beforeCreate的钩子函数中将vue实例赋值给全局变量_self，
然后filters中即可通过_self获取data中数据 过滤器的注意点
1.要定义到filters 节点下，本质是一个函数
2.在过滤器函数中，-定要有return值
-->
<!--在双花括号中通过“管道符"调用capitalize 过滤器，对message的值进行格式化-->
<p>{{ message | capitalize }}</p>
<!--在v-bind中通过“管道符"调用formatId 过滤器，对rawId的进行格式化-->
<div v-bind:id="rawId | formatld"></div>
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素实例，
data: {
message: '1003',
rawId: 1001,
list: [
{ id: '1001', name: '类型1'},
{ id: '1002', name: '类型2'},
{ id: '1003', name: '类型3'},
{ id: '1004', name: '类型4'},
{ id: '1005', name: '类型5'},
{ id: '1006', name: '类型6'},
],
list2: [
{ id: 1001, name: '主键1'},
{ id: 1002, name: '主键2'},
{ id: 1003, name: '主键3'},
{ id: 1004, name: '主键4'},
{ id: 1005, name: '主键5'},
{ id: 1006, name: '主键6'},
]
},
beforeCreate() {
// 使用钩子函数把vue实例赋值给_self变量
_self = this
},
filters: {
capitalize(val) {
// 过滤器方法一定要有返回值, 入参就是管道符前面的变量
const content = '无类型'
if (!val) return content // 注意访问data属性的值时无法使用this获取，通过钩子函数赋值的变量访问
// https://blog.csdn.net/to_the_Future/article/details/122083980
const type = _self.list.find(x => x.id === val)
if (!type) return content
return type.name
},
formatld(val) {
const content = '无主键'
if (!val) return content const type = _self.list2.find(x => x.id === val)
if (!type) return content
return type.name
}
}
})
</script>
</body>
</html>
全局过滤器和实例过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./../lib/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.6.0/dayjs.min.js"></script>
</head>
<body>
<!--
创建全局过滤器，对每一个Vue实例都可以处理
Vue.filter('过滤器名称', val => {
if (!val) return ''
const type = list.find(x => x.id === val)
if (!type) return ''
return type.name
})
如果局部过滤器和全局过滤器一样名字，则调用局部过滤器
Vue支持连续过滤器
类似linux的管道符，第一个过滤器完成后交给后面的过滤器继续执行
{{item.time | filterFunctionA | filterFunctionB | ... }} 过滤器参数传递问题
1、首个参数一定是管道符传递过来的参数，后面的入参才是自定义的
{{item.time | filterFunction(val1, val2, ...) }} filters: {
filterFunction(arg1, arg2, ...) {
}
}
-->
<div id="app">
<p>{{ message | capitalize }}</p>
<p>{{ createTime | dateFormat }}</p>
</div> <div id="app2">
<p>{{ message | capitalize }}</p>
</div>
<script>
// dayJS资源引入
// const DAYJS = require('dayjs') const list = [
{ id: '1001', name: '全局类型1'},
{ id: '1002', name: '全局类型2'},
{ id: '1003', name: '全局类型3'},
{ id: '1004', name: '全局类型4'},
{ id: '1005', name: '全局类型5'},
{ id: '1006', name: '全局类型6'}
] Vue.filter('capitalize', val => {
if (!val) return ''
const type = list.find(x => x.id === val)
if (!type) return ''
return type.name
})
// 全局的时间过滤器
Vue.filter('dateFormat', val => {
// 可以安装MomentJS处理
// DAYJS处理
const dateString = dayjs(val).format('YYYY-MM-DD')
console.log(dateString)
return dateString
}) const VIEW_MODEL1 = new Vue({
el: '#app',
data: {
message: '1003',
createTime: new Date(),
list: [
{ id: '1001', name: '局部类型1'},
{ id: '1002', name: '局部类型2'},
{ id: '1003', name: '局部类型3'},
{ id: '1004', name: '局部类型4'},
{ id: '1005', name: '局部类型5'},
{ id: '1006', name: '局部类型6'},
],
},
beforeCreate() {
// 使用钩子函数把vue实例赋值给_self变量
_self = this
},
filters: {
capitalize(val) {
// 过滤器方法一定要有返回值, 入参就是管道符前面的变量
const content = '无类型'
if (!val) return content // 注意访问data属性的值时无法使用this获取，通过钩子函数赋值的变量访问
// https://blog.csdn.net/to_the_Future/article/details/122083980
const type = _self.list.find(x => x.id === val)
if (!type) return content
return type.name
},
}
}) const VIEW_MODEL2 = new Vue({
el: '#app2',
data: {
message: '1005',
}
})
</script>
</body>
</html>
【Vue2】Filter 过滤器的更多相关文章
- vue2 filter过滤器的使用
本章主要讲vue2的过滤器的使用 1.先介绍下vue1与vue2的filter区别,也就是vue2更新的地方 a: 2.0将1.0所有自带的过滤器都删除了,也就是说,在2.0中,要使用过滤器,则需要我 ...
- vue2.0过滤器
最近一阶段,项目上比较清闲,有了更多的时间可以研究一下vue了. 这里记录一下关于vue2.0过滤器的学习. vue2.0删除了所有的框架自带的过滤器,也就是说,如果你在vue2.0当中想用过滤器,那 ...
- filter 过滤器（监听）
Filter 过滤器 1.简介 Filter也称之为过滤器,它是Servlet技术中最实用的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, ...
- Java防止SQL注入2（通过filter过滤器功能进行拦截）
首先说明一点,这个过滤器拦截其实是不靠谱的,比如说我的一篇文章是介绍sql注入的,或者评论的内容是有关sql的,那会过滤掉:且如果每个页面都经过这个过滤器,那么效率也是非常低的. 如果是要SQL注入拦 ...
- Filter(过滤器)学习
一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态 ...
- javaweb学习总结(四十二)——Filter(过滤器)学习
一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态 ...
- Filter过滤器简单应用( 接口访问控制 )
一.描述 在提供安卓.IOS客户端接口时,可以在登陆接口分配Session给客户端,用于判断其他接口是否是合法访问,以避免将所有的接口都暴露在web中可以由路径直接访问.但是最近的一个项目中的移动接口 ...
- 如何配置Filter过滤器处理JSP中文乱码
参考Tomcat服务器目录webapps的examples示例 简单配置步骤:1.在项目web.xml文件添加过滤器标记<filter>和<filter-mapping>:2. ...
- Filter(过滤器)常见应用
孤傲苍狼 只为成功找方法,不为失败找借口! javaweb学习总结(四十六)——Filter(过滤器)常见应用 一.统一全站字符编码 通过配置参数charset指明使用何种字符编码,以处理Html F ...
- Filter过滤器（1）
Filter也称之为过滤器,它是Servlet技术中比较激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或静态 ht ...
随机推荐
- Kali Linux 终端字体配色
在用root用户登录Kali Liunx时,会发现终端的字体无配色,非常难看,以下这幅图便是kali用户和root用户的区别,看着真难受. echo $PS1,这便是区别所在. 那我们怎么让root用 ...
- 关于 Elasticsearch 不同分片设置的压测报告
摘要 为了验证当前集群经常出现索引超时以及请求拒绝的问题,现模拟线上集群环境及索引设置,通过压测工具随机生成测试数据,针对当前的 850 个分片的索引,以及减半之后的索引,以及更小分片索引的写入进行压 ...
- mysql加解密,substring substring_index函数
mysql加解密,substring substring_index函数 SELECT to_base64(AES_ENCRYPT('测试串','key12345678')) ;SELECT AES_ ...
- spring boot jpa 进行通用多条件动态查询和更新 接口
原因: jpa 没有类似于mybatis的那种 拼接sql的方式 想动态更新 需要使用 CriteriaUpdate的方式 去一直拼接,其实大多数场景只要传入一个非空实体类,去动态拼接sql 1.定义 ...
- 剖析 Kafka 消息丢失的原因
目录 前言 一.生产者导致消息丢失的场景 场景1:消息体太大 解决方案 : 1.减少生产者发送消息体体积 2.调整参数max.request.size 场景2:异步发送机制 解决方案 : 1.使用带回 ...
- STM32 CubeMX 学习：002-外部中断的使用
背景 上一讲 STM32 CubeMX 学习:GPIO的使用 介绍了如何配置以及操作GPIO引脚. 这一讲我们通过中断来控制按键.关于中断的概念不做介绍. HOST-OS : Windows-10 S ...
- 『vulnhub系列』BEELZEBUB- 1
『vulnhub系列』BEELZEBUB- 1 下载地址: https://www.vulnhub.com/entry/beelzebub-1,742/ 信息搜集: 使用nmap扫描存活主机,发现主机 ...
- tcp_tw_reuse、tcp_tw_recycle、tcp_fin_timeout参数介绍
参数介绍 net.ipv4.tcp_tw_reuse = 1 表示开启重用.允许将TIME-WAIT sockets重新用于新的TCP连接,默认为0,表示关闭: net.ipv4.tcp_tw_rec ...
- 3568F-Qt工程编译说明
- Docker开启远程安全访问
一.编辑docker.service文件 vi /usr/lib/systemd/system/docker.service 找到 [Service] 节点,修改 ExecStart 属性,增加 -H ...