vue基础之过滤器-常见文本格式化

最新推荐文章于 2022-10-24 22:51:57 发布

一杯雪花勇闯天涯

最新推荐文章于 2022-10-24 22:51:57 发布

阅读量1.1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/u014265398/article/details/109150709

版权

vue 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

文章目录

前言
一.全局过滤器
- 1.在创建 Vue 实例之前全局定义过滤器：
- 2 .代码示例
二.Vue局部过滤器
- 1.用法
- 2.代码示例
总结

前言

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部

一.全局过滤器

1.在创建 Vue 实例之前全局定义过滤器：

Vue.filter("过滤器名称",function(v){});

v 是当前过滤器的调用者被处理的数据，自带参数，在视图中使用过滤器{{msg|‘过滤器的名称’}}

2 .代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue全局过滤器</title>
	</head>
	<body>
		<div id="app">
			<p>{{msg|toUpper}}</p>
		</div>
	</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
	Vue.filter('toUpper',function(v){
		
		return v.charAt(0).toUpperCase()+v.substr(1);
	});
	var vm = new Vue({
		el:"#app",
		data:{
			msg:"abcd",
			
		},
		methods:{
			
		}
	});
</script>

二.Vue局部过滤器

1.用法

1.通过filter 选项定义过滤器fliter:{‘过滤器名称’：function(v){ return 返回v处理结果 }}
2.在视图中{{msg|'过滤器名称}}

2.代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue局部过滤器</title>
	</head>
	<body>
		<div id="app">
			<p>{{msg|toUpper}}</p>
		</div>
	</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">

	var vm = new Vue({
		el:"#app",
		data:{
			msg:"abcd",
			
		},
		methods:{
			
		},
		filters:{
			"toUpper":function(v) {
				return v.charAt(0).toUpperCase()+v.substr(1);
			}
		}
	});
</script>