Vue2.0学习笔记-9、全局过滤器和私有过滤器的使用

最新推荐文章于 2024-07-04 10:07:27 发布
最新推荐文章于 2024-07-04 10:07:27 发布
阅读量289 收藏 1
点赞数
分类专栏： vue学习笔记 文章标签： vue 过滤器 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41364246/article/details/109616970
版权

vue过滤器


vue中的过滤器只能在插值表达式或者v-bind指令中使用

1、全局过滤器

(1)语法

定义过滤器：

Vue.filter('过滤器名称',function(参数1，参数2，...，参数n)
{
//代码
}

过滤器的调用:

		<div id="app">
			{{msg|过滤器名称}}
			<input :style="styleObj" type="text" name="" id="" :value="msg|过滤器名称" />
		</div>

其中，参数1永远是|运算符前面的变量，参数2至参数n是用户自定义的参数，可省略

(2)示例

a、全局过滤器的基本使用

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{msg|firstFilter}}
			<input :style="styleObj" type="text" name="" id="" :value="msg|firstFilter" />
		</div>
		<script type="text/javascript">
			Vue.filter('firstFilter',function(data){
				
				return data.replace(/青/g,'250');
			});
			var vm=new Vue({
				el:'#app',
				data:{
					msg:'青春啊青春，美丽的青春；狗爷退役了，我的青春结束了，爷青结！',
					styleObj:'display:block;width:100%',
				},
				methods:{
					
				},
			})
		</script>
	</body>
</html>

效果：
在这里插入图片描述

b、全局过滤器的串联使用

代码：注意这里，第二个过滤器的名称是中文，但是也不会报错，也就是说，过滤器名称可以是中文，但是不建议这么做

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{msg|firstFilter|第二个过滤器}}
			<input :style="styleObj" type="text" name="" id="" :value="msg|firstFilter|第二个过滤器" />
		</div>
		<script type="text/javascript">
			Vue.filter('firstFilter',function(data){
				
				return data.replace(/青/g,'250');
			});
			Vue.filter('第二个过滤器',function(data){
				
				return data.replace(/250/g,'***');
			});
			var vm=new Vue({
				el:'#app',
				data:{
					msg:'青春啊青春，美丽的青春；狗爷退役了，我的青春结束了，爷青结！',
					styleObj:'display:block;width:100%',
				},
				methods:{
					
				},
			})
		</script>
	</body>
</html>

效果：
在这里插入图片描述

c、给全局过滤器的回调函数增加参数

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{msg|firstFilter|第二个过滤器('参数二','参数三')}}
			<input :style="styleObj" type="text" name="" id="" :value="msg|firstFilter|第二个过滤器('参数二','参数三')" />
		</div>
		<script type="text/javascript">
			Vue.filter('firstFilter',function(data){
				
				return data.replace(/青/g,'250');
			});
			Vue.filter('第二个过滤器',function(data,newData1,newData2){
				
				return data.replace(/250/g,'***')+newData1+newData2;
			});
			var vm=new Vue({
				el:'#app',
				data:{
					msg:'青春啊青春，美丽的青春；狗爷退役了，我的青春结束了，爷青结！',
					styleObj:'display:block;width:100%',
				},
				methods:{
					
				},
			})
		</script>
	</body>
</html>

效果：
在这里插入图片描述

2、私有过滤器

(1)语法

定义私有过滤器：

<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					msg:'青春啊青春，美丽的青春；狗爷退役了，我的青春结束了，爷青结！',
					styleObj:'display:block;width:100%',
				},
				methods:{
					
				},
				filters:{//定义私有过滤器
					firstFilter:function(data)//过滤器名称
					{
						return data.replace(/青/g,'250');
					}
				}
			})
		</script>

调用和全局过滤器相同。

(2)示例

a、私有过滤器的基本使用(和全局过滤器相同)

b、私有过滤器的串联使用(和全局过滤器相同)

c、给私有过滤器的回调函数增加参数(和全局过滤器相同)

d、当全局过滤器和私有过滤器重名时(默认调用私有过滤器)

这个很好理解，当私有变量和全局变量重名时，默认调用私有变量，几乎所有编程语言都是这样。
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{msg|firstFilter|secondFilter('+++')}}
			<input :style="styleObj" type="text" name="" id="" :value="msg|firstFilter|secondFilter('+++')" />
		</div>
		<script type="text/javascript">
			Vue.filter('firstFilter',function(data){
						return data.replace(/春/g,'250');
					})
			var vm=new Vue({
				el:'#app',
				data:{
					msg:'青春啊青春，美丽的青春；狗爷退役了，我的青春结束了，爷青结！',
					styleObj:'display:block;width:100%',
				},
				methods:{
					
				},
				filters:{
					firstFilter:function(data){
						return data.replace(/青/g,'250');
					},
					secondFilter:function(data,newData){
						return data.replace(/250/g,'***')+newData;
					}
				}
			})
		</script>
	</body>
</html>

结果：
在这里插入图片描述

不收藏找不到我
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 2.0 学习笔记（二）
weixin_44772326的博客
12-07 3924
Vue基础入门（1）：Vue的数据驱动视图与双向绑定特性，MVVM工作原理，Vue调试工具，Vue指令与Vue过滤器
Vue的全局过滤器和私有过滤器的实现
10-15
主要介绍了Vue的全局过滤器和私有过滤器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue2.0学习笔记-11、自定义全局指令、自定义私有指令
weixin_41364246的博客
11-18 219
自定义指令1、自定义全局指令(1)语法三级目录2、自定义私有指令二级目录三级目录 1、自定义全局指令 (1)语法 定义： //Vue.directive函数的第一个参数是自定义指令名称，第二个参数是一个对象 //指令名称不用加v-，调用自定义命令是，统一都是：v-指令名称 Vue.directive('指令名称', { bind: function(参数1，参数2，参数3，参数4){ }, inserted: function(参数1，参数2，参数3，参数4){ }, upd
Vue 过滤器（Filter）的理解与用法
最新发布
My_wife_QBL的博客
07-04 552
过滤器是 Vue 提供的一种数据处理机制，它可以在模板中对数据进行格式化或转换。过滤器通常用于文本格式化，例如日期格式化、货币格式化、字符串截取等。全局过滤器可以在整个应用中使用，通过Vue.filter方法进行定义。if (!});Vue 过滤器是一个强大的工具，它允许我们在模板中对数据进行格式化处理。通过全局过滤器和局部过滤器的定义，我们可以在整个应用或特定组件中使用过滤器。过滤器支持参数传递和串联使用，使得数据处理更加灵活和强大。在使用过滤器时，我们应该保持简单、避免副作用，并合理使用第三方库。
vue2.0学习笔记黑马
firewrk的博客
05-28 1013
前置知识 一、WebPack 实际开发中并不需要手动配置webpack 1、概念 webpack是前端项目工程化的具体解决方案 主要功能：提供了友好的前端模块化开发支持、以及代码压缩混淆、处理浏览器端javaScript的兼容性、性能优化等强大的功能 好处：提高开发效率和项目可维护性 2、创建webpack项目 新建项目空目录需要英文路径，并允许npm init -y 命令，初始化包管理配置文件 package.json 新建src源代码目录 新建src->index.html首页和src
VUE学习笔记--过滤器
emmmm.....
03-12 791
文章目录过滤器过滤器实例私有过滤器和全局过滤器过滤器注意点时间格式化连续调用多个过滤器过滤器的兼容性 过滤器 过滤器实例 将英文字符串的第一个字母转为大写 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
Vue2.0 学习笔记（2）
A1107769594的博客
03-18 91
vue2.0中的过滤器、侦听器、计算属性的使用
Vue-过滤器&侦听器-学习笔记
qq_64450294的博客
11-10 394
Vue-过滤器&侦听器-学习笔记
【Vue2.0】黑马课程笔记（一）基本指令和过滤器
小女不才
04-06 1664
目录(一)什么是Vue.js（1）为什么要学习流行框架？（2）框架和库的区别（3）Node（后端）中的 MVC 与 前端中的 MVVM 之间的区别（二）Vue指令（1）Vue.js 模板语法1.1 v- 一些常见指令1.2 循环语句：`v-for:`1.3 v-model:双向数据绑定1.4 事件修饰符：stop,prevent。1.5 绑定class类样式1.6 绑定style行内样式 ...
vue自学笔记-私有过滤器学习
weixin_42715209的博客
12-09 89
私有过滤器的优先级高于全局过滤器。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> ...
【Vue学习笔记】过滤器（filter）
biancheng_的博客
02-25 214
Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化，比如字母的大写、日期的格式化。vue1.x版本有系统自带过滤器，vue2.x之后完全需要自定义，没有自带过滤器。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。我们可以用全局方法自定义一个全局过滤器。这样的话，每一个Vue的对象实例（每一个VM实例）都可以拿到这个过滤器。它接收两个参数：过滤器的名称 、过滤器函数。
Vue2.0系列之过滤器的使用
08-27
本文将详细介绍如何在Vue2.0中创建和使用自定义过滤器。 首先，我们来了解一下过滤器的使用场景。过滤器通常应用于两种情况：1) 双花括号插值 `{{ }}`，2) `v-bind` 表达式。例如，在双花括号插值中，我们可以使用...
Vue的全局过滤器和私有过滤器
01-08
Vue允许自定义过滤器 可被用作一些常见的文本格式化 过滤器可以用在两个地方：mustache插值表达式 和 v-bind表达式 过滤器应被添加在JavaScript表达式的尾部 由“管道”符指示(管道符就是一个竖杠：|) 一、全局过滤...
vue-cli 3 全局过滤器的实例代码详解
10-16
主要介绍了vue-cli 3 全局过滤器的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue-video-player:vue2.0+vue-video-player实现hls播放全过程
04-28
Vue VUE，这是VUE 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and ...
vue3.x实践经验-1、mapState、mapGetters、mapMutations、mapActions
weixin_41364246的博客
06-04 6041
一边学习vue3.x，一边实践，最近在做项目时，使用computed引入store中state的数据时，总是觉得很麻烦，想起新版兼容2.x,就想着引入mapState，可是怎么用都不对劲。后来，突然间醒悟过来，<font color=red>**使用toRef或toRefs，就能实现mapState、mapGetters效果。**</font> 1、示例代码 ...
Vue2.0学习笔记-5、v-model指令实现双向数据绑定(唯一一个能够实现双向数据绑定的指令)
weixin_41364246的博客
11-10 696
1、什么是数据双向绑定？ 所谓的数据双向绑定就是用户对界面的操作可以实时的同步到数据中，同时，数据又会展示到界面上。话不多说，看下面的例子： 代码： 这里通过v-bind指令实现数据绑定，注意，这里的数据绑定不是双向绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsde
Vue2.0学习笔记-6、vue中如何使用样式-(1)使用class样式(v-bind指令的应用)
weixin_41364246的博客
11-10 630
以下都是通过v-bind指令实现标签绑定class样式 (1)数组 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .red{ color:red } .thin{ font-weight: thin; } .italic{
Vue2.0学习笔记-7、v-for指令以及key属性的使用、注意事项
weixin_41364246的博客
11-11 590
v-for指令很像原生js中的foreach方法。 v-for指令的使用1、使用v-for指令遍历普通数组(1)语法(2)示例2、使用v-for指令遍历对象数组(1)语法(2)示例3、使用v-for指令遍历对象(1)语法(2)示例4、使用v-for指令遍历数字(1)语法(2)示例5、重点：v-for指令中key属性的搭配使用不使用key属性使用key属性使用key属性时的注意事项 1、使用v-for指令遍历普通数组 (1)语法 第一种调用方式 v-for="参数一，参数二 in 变量" 第二种调用方式 v
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值