Vue教程-过滤器filter知识入门- 学习vue第一站深入浅出(三)

插值与表达式

“{{}}”是最基本的文本插值方法,会将我们双向绑定的数据实时显示。

除了绑定属性值外,还可以使用三元运算符,如:{{isOK?“确定”:“取消”}}

过滤器

在插值的尾部,增加 “|” 对数据进行过滤,经常用于格式化文本数据,下面,我将演示下:如何格式化时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤器示例</title>
	</head>
	<body>
		<div id="app"> 
			<h1> 郝大湿告诉你当前时间:{{date|formateTime}} </h1>
		</div>
		<script src="js/vue.min.js"></script>
		<script>
			//格式化后的时间格式示例:2019-06-01 01:01:01
			var parseDate = function(datetime){
				return datetime<10?'0'+datetime:datetime;
			}
			var app = new Vue({
				el:'#app',
				data:{date:new Date()},
				filters:{
					formateTime:function (val) { //val就是date
						let date = new Date(val);
						let year = date.getFullYear();
						let month = parseDate(date.getMonth()+1);
						let day = parseDate(date.getDate());
						let hours = parseDate(date.getHours());
						let min = parseDate(date.getMinutes());
						let sec = parseDate(date.getSeconds());
						return year +'-'+month +'-'+day+' '+hours +":"+min+":"+sec;
					}
				},
				created:function(){
					let that = this; //作用域一致
					this.timer = setInterval(function () {
						that.date = new Date();
					},1000);
				},
				beforeDestroy:function(){
					if (this.timer) {
						clearInterval(this.timer);
					}
				}
			})
 
		</script>
	</body>
</html>

过滤器可以串联、接收参数,如:

{{text | filterA | filterB}}

{{text | filterNmae('arg1','arg2')}}

过滤器通常用于文本的处理,如果要做数据变换,应该应用“计算属性”,那么,开始下节内容:

发布了28 篇原创文章 · 获赞 12 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_43687095/article/details/94381679