Vue中的filter

最新推荐文章于 2024-07-04 10:07:27 发布

百日梦想家

最新推荐文章于 2024-07-04 10:07:27 发布

阅读量588

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_42418169/article/details/108021659

版权

vue 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

filter

定义
调用
- 注意：
实例
- 效果
过滤器（filter）分全局和私有（局部）

定义

<script>
	Vue.filter(id,function(data[,...]){})
</script>

定义	数据类型	解释
id	string	过滤器的名称
function(data,…){}	function	需要执行的函数，第一个参数必定，肯定是前面传递过来的数据，参数可以任意多个

调用

{{ 参数 | filter名称[ |....] }}

注意：

当过滤器没有多余参数时，调用时可以不带括号，直接写名称
多个过滤器可以同时使用
过滤器并不会，修改参数data原本的值

实例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>default</title>
	<script src="../js/Vue2.6.11.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{msg | filter01 | filter02('=======')}}</h1>
		</div>
		
		<script type="text/javascript">
			// 注意：Vue的filter是全局方法
			Vue.filter('filter01',function(data){
				
				return data.replace(/邪恶/g,'疯狂')
				
			})
			
			// 注意：过滤器的第一个参数时必定的，但是后面我们可以自定义参数
			Vue.filter('filter02',function(data,agrs){
				return data+agrs
			})
			
			var vm=new Vue({
				el:'#app',
				data:{
					msg:'我是个邪恶的男人，我常常邪恶的问其他人，谁是世界上最邪恶的男人！'
				},
				methods:{}
			});
		</script>
	</body>
</html>

效果

在这里插入图片描述

过滤器（filter）分全局和私有（局部）

全局过滤器

通过Vue.filter()方法来实现

Vue.filter()

私有过滤器

通过Vue()实例的filters属性来书写，书写格式与全局过滤器的格式一样

<script>
	var vm=new Vue({
				el:'#app',
				data:{
					msg:'我是个邪恶的男人，我常常邪恶的问其他人，谁是世界上最邪恶的男人！'
				},
				methods:{},
				filters:{
					filtername:function(data){}
				}
			});
</script>