Vue2.0系列之过滤器的使用

2020-06-16 06:12:46易采站长站整理

<script type="text/javascript">
var demo = new Vue({
el: "#app",
data: {
str:'hello',
message:12
},
filters: {
upcase:function(value){
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
},
sum:function(value, a, b){
return value + a + b;
}
}
});

</script>
</body>
</html>

效果:

三、常见过滤器

根据时间戳转化成时间格式:mm-dd hh:tt


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<div id="app">
<!-- 将时间戳转化为时间 -->
<h1>根据时间戳转化为时间:{{ str | formateTime}}</h1>
</div>

<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
var demo = new Vue({
el: "#app",
data: {
str:1517568434324,
},
filters: {
formateTime:function(nS){
return ((new Date(nS).getMonth()+1)<10?'0'+(new Date(nS).getMonth()+1):(new Date(nS).getMonth()+1)) + '-' + (new Date(nS).getDate()<10?'0'+new Date(nS).getDate():new Date(nS).getDate()) + ' ' + (new Date(nS).getHours()<10?'0'+new Date(nS).getHours():new Date(nS).getHours()) + ':' + (new Date(nS).getMinutes()<10?'0'+new Date(nS).getMinutes():new Date(nS).getMinutes())
}
}
});

</script>
</body>
</html>

案例效果: