Vue过滤器

过滤器

​ 对数据进行进一步处理

​ eg：Tue Feb 23 2021 20:48:46 GMT+0800 (中国标准时间)

调用格式

{{ name | nameope }}

//该filter需放在前面
Vue.filter('过滤器的成称',function(){
				
			})

基本使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{msg | msgOut }}</h1>
		</div>
		
		<script type="text/javascript">
			//第一个参数：过滤器管道符前面传递过来的数据
			Vue.filter('msgOut',function(data){
				return data+" World";
			})
			
			var vm = new Vue({
				el: "#app",
				data:{
					msg:"Hello"
				},
				methods:{
				}
			})
			
			
		</script>
	</body>
</html>

格式化时间的全局过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{time | dataFormat }}</h1>
		</div>
		
		<script type="text/javascript">
			//第一个参数，永远都是过滤器管道符前面传递过来的数据
			Vue.filter('dataFormat',function(data){
				//根据时间字符串，得到时间
				var dt = new Date(data);
				
				// 变化格式 ：yyyy-mm-dd
				var y = dt.getFullYear();
				var m = dt.getMonth();
				var d = dt.getDate();
				
				return  `${y}-${m}-${d}`; //`yyyy-mm-dd`
			})
			
			var vm = new Vue({
				el: "#app",
				data:{
					time:new Date()
				},
				methods:{
				}
			})
			
			
		</script>
	</body>
</html>

自定义私有过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{msg | msgOut }}</h1>
		</div>
		
		<script type="text/javascript">
			
			
			var vm = new Vue({
				el: "#app",
				data:{
					msg:"Hello"
				},
				//定义私有过滤器 
				filters:{
					msgOut:function(data){
						return data+" World";
					}
				}
			})
			
			
		</script>
	</body>
</html>

注：

​ 过滤器调用，会采用就近原则。

​ 即若私有过滤器和全局过滤器名称一致时，将优先采用私有过滤器