【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 ...
随机推荐
- 16位简单ASM题的记录——[HGAME 2022 week1]easyasm
第一次遇见16位,和纯看汇编的题目,记录一下 DIE 16位,IDA用32位或者64位都可以打开 IDA 主要汇编部分 seg003:0000 ; =============== S U B R O ...
- flutter3-weos手机OS系统|Flutter3.22+Getx仿ios桌面管理OA应用
原创自研flutter3.x+getx仿制ios手机桌面UI管理系统模板Flutter3-OS. flutter3-osx基于最新跨平台技术Flutter3.22+Dart3.4+GetX+fl_ch ...
- MySQL创建表的时候建立联合索引的方法
1.MySQL创建表建立联合索引的步骤 在MySQL中,联合索引(也称为复合索引或多列索引)是基于表中的多个列创建的索引.这种索引可以提高多列查询的性能,特别是当查询条件涉及这些列时.下面是一个详细的 ...
- 什么是 MyBatis 的接口绑定,有什么好处？
接口映射就是在 MyBatis 中任意定义接口,然后把接口里面的方法和 SQL 语句绑定,我们直接调用接口方法就可以,这样比起原来了 SqlSession 提供的方法我们可以有更加灵活的选择和设置.
- 原始指针 [raw pointers]
指针是一个变量,用于存储对象的内存地址. 指针广泛应用于 C 和 C++: 在堆上分配新对象 通过参数将某些函数传递给其他函数 迭代/遍历数组或其他数据结构的元素 int* p = nullptr; ...
- 纯代码搭建iOS三级结构（UITabbarController+UINavigationController+UIViewController）
声明:这里所指的三级结构不是网上百度中所经常提及的三级框架或者MVC模式,而是指UITabbarController+UINavigationController+UIViewController. ...
- Shell依次输出1,2,3...
个人觉得,Shell没有其他语言方便,同样是脚本语言,我更倾向于Python. Shell怎么输出1,2,3,4类似的递增数列呢? #!/bin/bash i=0 while [ $i -le 100 ...
- Markdown常用语法详解
背景知识 什么是html html是一种网页标记语言.我们平常见到的那么好看的网页就是通过html语言来编写的. html语言举例: <h1>hello world</h1> ...
- Linux 修改 hostname
背景 之前安装Linux系统的时候,没有明确指定.现在因为在做某些实验的时候,为了更好地区分我所登录的每一台服务器. 于是有了此文. 做法 首先修改/etc/hostname,修改为自己想要的名字xx ...
- 在SMT32程序HEX文件中加入固件版本信息
将固件版本信息定义成一个常量存放在程序中,需要的时候可以通过串口等接口查询代码版本信息,另一种,是利用编译器的语法,将固定的信息保存到某地. #define VERINFO_ADDR_BASE (0x ...