【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 ...
随机推荐
- webpack配置css预处理
webpack默认只支持js的打包,不支持其它类型,为了让它支持样式的打包就需要加载一些loader 打包css文件 在webpack中配置对应的loader 在入口js文件中通过import导入样式 ...
- kettle从入门到精通 第六十二课 ETL之kettle job中发送邮件（带多个附件），闭坑指南
1.今天群里一个朋友加我微信遇到问下向我求助.一顿测试下来发现原来是使用kettle姿势不对,对kettle没有完全驾驭导致的,今天和大家一起分享下这个问题. 2.先自我膨胀下,自从写kettle系列 ...
- __proto__和[[Prototype]]的区别
__proto__和[[Prototype]]的区别 先看下面这一段代码: const obj1 = Object.create(null); // very plain object obj1.__ ...
- hive第一课：# hive-3.1.2分布式搭建文档
hive-3.1.2分布式搭建文档 谷歌浏览器下载网址:Google Chrome – Download the fast, secure browser from Google 华为云镜像站:htt ...
- 【资料分享】全志科技T507-H评估板规格书（4核ARM Cortex-A53，主频1.416GHz）
1 评估板简介 创龙科技TLT507-EVM是一款基于全志科技T507-H处理器设计的4核ARM Cortex-A53国产工业评估板,主频高达1.416GHz,由核心板和评估底板组成.核心板CPU.R ...
- AI Agent框架（LLM Agent）：LLM驱动的智能体如何引领行业变革，应用探索与未来展望
AI Agent框架(LLM Agent):LLM驱动的智能体如何引领行业变革,应用探索与未来展望 1. AI Agent(LLM Agent)介绍 1.1. 术语 Agent:"代理&qu ...
- HIVE从入门到精通------（1）hive的基本操作
1.开启hive 1.首先在master的/usr/local/soft/下启动hadoop: master : start-all.sh start-all.sh 2.在另一个master(2)上监 ...
- Maven pom.xml文件
pom.xml 版本依赖 <!--编译器依赖--> <properties> <project.build.sourceEncoding>UTF-8</pro ...
- 面试官：Java对象引用都有哪些类型?
哈喽,大家好,我是世杰. 本文我为大家介绍面试官经常考察的「Java对象引用相关内容」 照例在开头留一些面试考察内容~~ 面试连环call Java对象引用都有哪些类型? Java参数传递是值传递还是 ...
- yolov5+deepsort+slowfast复现
1.运行环境 ubuntu 18.04.1 Cuda 11.5 Python 3.8.15 torch 1.10.1+cu113 torchvision 0.11.2+cu113 2.安装PyTorc ...