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

最新推荐文章于 2021-12-17 15:14:00 发布

郝小胖的独门秘笈

最新推荐文章于 2021-12-17 15:14:00 发布

阅读量301

点赞数

分类专栏： vue 前端技术

本文链接：https://blog.csdn.net/weixin_43687095/article/details/94381679

版权

前端技术同时被 2 个专栏收录

21 篇文章 1 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

插值与表达式

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

除了绑定属性值外，还可以使用三元运算符，如：{{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')}}

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

郝小胖的独门秘笈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue教程-过滤器filter知识入门- 学习vue第一站深入浅出（三）

插值与表达式“{{}}”是最基本的文本插值方法，会将我们双向绑定的数据实时显示。除了绑定属性值外，还可以使用三元运算符，如：{{isOK？“确定”：“取消”}}过滤器在插值的尾部，增加 “|” 对数据进行过滤，经常用于格式化文本数据，下面，我将演示下：如何格式化时间<!DOCTYPE html><html> <head> &lt...
复制链接

扫一扫

专栏目录