【Vue】filter 过滤器用法

news2024/11/17 15:49:34

文章目录

- 一、全局过滤器
- 二、局部过滤器

一、全局过滤器

语法：

Vue.filter(name,function)
- name: 过滤器名称
- function: 执行函数，必须有一个过滤后的返回值

使用方法：变量名 | 过滤器名称
{{name | function()}}

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 使用双大括号显示vue定义的变量内容 -->
			<p>{{aa | toUpper}}</p>
			<p>{{aa | subFilter(1)}}</p>
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			// 定义全局过滤器，需要放在new Vue前面
			Vue.filter("toUpper", (val) => {
				console.log("toUpper 过滤器触发了", val);
				// 小写字母转大写字母
				return val.toUpperCase();
			})
			//  val：使用过滤器的变量
			//  num：过滤器要传的参数
			Vue.filter("subFilter", (val, num) => {
				console.log("subFilter 过滤器触发了", val, num);
				// substring：截取字符串
				return val.substring(0, num);
			})
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据
					aa: 'hello',
					BB: 'WORLD',
				},
			})
		</script>
	</body>
</html>

运行结果：

二、局部过滤器

语法：

filters: {
	name: function(),
}
- name: 过滤器名称
- function: 执行函数，必须有一个过滤后的返回值

使用方法：变量名 | 过滤器名称
{{name | function()}}

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 使用双大括号显示vue定义的变量内容 -->
			<p>{{BB | toLower}}</p>
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据
					aa: 'hello',
					BB: 'WORLD',
				},
				// 局部过滤器
				filters: {
					toLower: (val) => {
						console.log(val);
						// 大写字母转小写
						return val.toLowerCase();
					}
				}
			})
		</script>
	</body>
</html>