Vue基础——过滤器（有参+无参数）

最新推荐文章于 2022-10-10 00:38:58 发布

失忆症患者_

最新推荐文章于 2022-10-10 00:38:58 发布

阅读量386

点赞数

分类专栏： vue基础文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/qq_41929578/article/details/108932994

版权

vue基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

vue中的过滤器分为两种：局部过滤器和全局过滤器

定义无参数全局过滤器（可定义多个）

<div>{{msg | upper }}</div>
 Vue.filter('upper',function(val){
		//将字符串的一个字符大写,slice从第一个字符之后截取
		return val.charAt(0).toUpperCase()+val.slice(1);
			});

定义无参数局部过滤器

<div>{{msg | upper1}}</div>
filters:{
		upper1:function(val){
			return val.charAt(0).toUpperCase()+val.slice(1);
					}
			}

完整示例：将字符串的第一个字符大写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="msg" />
			<div>{{msg | upper }}</div>
			<div>{{msg | upper1}}</div>
			<div>{{msg | lower}}</div>
		</div>
		<script type="text/javascript">
			//全局过滤器
			Vue.filter('upper',function(val){
				//将字符串的一个字符大写,slice从第一个字符截取
				return val.charAt(0).toUpperCase()+val.slice(1);
			});
			Vue.filter('lower',function(val){
				//将字符串的一个字符大写,slice从第一个字符截取
				return val.charAt(0).toLowerCase()+val.slice(1);
			})
			var vm = new Vue({
				el:"#app",
				data:{
					msg:""
				},
				//局部过滤器
				filters:{
					upper1:function(val){
						return  val.charAt(0).toUpperCase()+val.slice(1);
					}
				}
			})
		</script>
	</body>
</html>

3.定义有参数全局过滤器

<div>{{date | format('ss')}}</div>
Vue.filter("format",function(value,arg){
		if(arg=="ss"){
				var ret = '';
				ret += value.getFullYear()+'-'+ (value.getMonth()+1)+'-'+value.getDate();
				return ret;
			}
	})

有参数局部过滤器类似；

完整示例：过滤时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>{{date | format('ss')}}</div>
		</div>
		<script type="text/javascript">
			Vue.filter("format",function(value,arg){
						if(arg=="ss"){
							var ret = '';
							ret += value.getFullYear()+'-'+ (value.getMonth()+1)+'-'+value.getDate();
							return ret;
						}
						return value;	
				})
			var vm = new Vue({
				el:"#app",
				data:{
					date: new Date()
				}
				//带参数的过滤器
//				filters:{
//					format:function(value,arg){
//						if(arg=="yyyy-MM-dd"){
//							var ret = '';
//							ret +=value.getFullYear()+'-'+ (value.getMonth()+1)+value.getData();
//							return ret;
//						}
//						return value;	
//					}
//				}
		});
		</script>
	</body>
</html>

注意：
1、当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
2、一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右；

失忆症患者_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue基础——过滤器（有参+无参数）

vue中的过滤器分为两种：局部过滤器和全局过滤器定义无参数全局过滤器（可定义多个）<div>{{msg | upper }}</div> Vue.filter('upper',function(val){ //将字符串的一个字符大写,slice从第一个字符之后截取 return val.charAt(0).toUpperCase()+val.slice(1); });定义无参数局部过滤器<div>{{msg | upper1}}</
复制链接

扫一扫