14_vue全局过滤器filter的使用

最新推荐文章于 2023-01-14 16:12:23 发布

嫣夜来

最新推荐文章于 2023-01-14 16:12:23 发布

阅读量442

点赞数 1

分类专栏： Vue前端框架

本文链接：https://blog.csdn.net/qq_41865652/article/details/102839143

版权

Vue前端框架专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1、全局过滤器filter如何定义

通过Vue的过滤器方法Vue.filter('过滤器名', function(args){})进行定义

定义全局过滤器的语法如下：

Vue.filter('filter_name', function(args){ })

2、如何调用全局过滤器filter

定义成功后，在需要使用的地方(过滤变量)使用{{ user|toLowerCase }}进行调用

3、实例代码演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01_vue中全局过滤器的使用</title>
</head>
<body>
	<div class="app">
		用户名：<input type="text" v-model.lazy.trim="user" /><br />
		学  号：<input type="text" v-model.lazy.trim="number" /><br />
		// 输入框中的所有大写字母在鼠标失去焦点时在span标签中都显示为小写字母
		<span>{{ user|toLowerCase }}</span><br />
		// 输入框中的所有0-4之间的数字在鼠标失去焦点时在span标签中都被替换显示为6
		<span>{{ number|setNumber }}</span><br />
	</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
	// 全局过滤器的使用
	// 第一：通过Vue的过滤器方法Vue.filter('过滤器名', function(args){})进行定义
	// 第二：定义成功了后，在需要使用的地方(过滤变量)使用{{ user|toLowerCase }}进行调用
	
	Vue.filter('toLowerCase', function(val){
		return val.toLowerCase();
	});
	Vue.filter('setNumber', function(val){
		return val.replace(/[0-4]/g, '6');
	})

	var app = new Vue({
		el: '.app',
		data: {
			user: '',
			number: '',
		},
	})
</script>
</html>

嫣夜来

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
14_vue全局过滤器filter的使用

1、全局过滤器filter如何定义通过Vue的过滤器方法Vue.filter('过滤器名', function(args){})进行定义定义全局过滤器的语法如下：Vue.filter('filter_name', function(args){ })2、如何调用全局过滤器filter定义成功后，在需要使用的地方(过滤变量)使用{{ user|toLowerCase }}进行调用...
复制链接

扫一扫