插值与表达式
“{{}}”是最基本的文本插值方法,会将我们双向绑定的数据实时显示。
除了绑定属性值外,还可以使用三元运算符,如:{{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')}}
过滤器通常用于文本的处理,如果要做数据变换,应该应用“计算属性”,那么,开始下节内容: