【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 ...
随机推荐
- itest(爱测试) 紧急 BUG 修复版(4.5.6)发布，,开源BUG 跟踪管理 & 敏捷测试管理&极简项目管理软件
itest 简介 itest 开源敏捷测试管理,testOps 践行者,极简的任务管理,测试管理,缺陷管理,测试环境管理4合1,又有丰富的统计分析.可按测试包分配测试用例执行,也可建测试迭代(含任务, ...
- python的一些常用编码技巧(持续更新)
语法问题 我常用的库函数 1 copy库 import copy copy.deepcopy() 2.list库 from typing import List 获取迭代对象的第一个值 方法一:使用l ...
- 算法金 | 再见！！！KNN
大侠幸会,在下全网同名「算法金」 0 基础转 AI 上岸,多个算法赛 Top 「日更万日,让更多人享受智能乐趣」 KNN算法的工作原理简单直观,易于理解和实现,这使得它在各种应用场景中备受青睐. 我们 ...
- CF1626E
problem 我们可以考虑什么情况下这个点一定可以到黑点. \(c_i = 1\). \(c_{son} = 1\). 儿子可以,并且儿子子树内有两个黑点 请两个不必多说,看最后一个. 假如说考虑他 ...
- 百度面试：如何用Redis实现限流？
高并发系统有三大特征:限流.缓存和熔断,所以限流已经成为当下系统开发中必备的功能了.那么,什么是限流?如何实现限流?使用 Redis 能不能实现限流?接下来我们一起来看. 1.什么是限流? 限流是指在 ...
- vue判断开始日期不能大于截至日期
method下的方法: checkTime() { var start = new Date(this.form.startDate).getTime() var end = new Date(thi ...
- 简单的解释下什么是CNAME
今天在用阿里云的安全防护给接口域名做web应用防火墙,需要配置cname,原来有用到过但是一直没去了解过,只知道怎么用今天搜了一下看看下面是原文,白话文好理解分享一下. 什么是CNAME?先简单的说下 ...
- Js 实现导航li列表，选中时，显示选中样式
结合Django项目实现 实现步骤: html页面部分,使用bootstrap.css中的样式(不用可忽略,主要class样式),要引用bootstrap.css,使用到actvie样式: <l ...
- P6623 [省选联考 2020 A 卷] 树
day2t2但难度不大,和AGC044C解法类似 题目大意: 给定一棵 \(n\) 个结点的有根树 \(T\),结点从 \(1\) 开始编号,根结点为 \(1\) 号结点,每个结点有一个正整数权值 \ ...
- 如何将自己的网站从 HTTP 的转换为 HTTPS 的
1. 获取 SSL/TLS 证书 首先,你需要获得一个 SSL/TLS 证书.你可以从以下来源之一获取证书: 免费证书: Let's Encrypt:一个免费的.自动化的证书颁发机构(CA),广泛使用 ...