过滤器
概念:
Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示(" | ");
分类:过滤器分为全局过滤器和局部过滤器(私有过滤器)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<p>{{msg | msgFormat('admin369') | test}}</p>
</div>
<div id="app2">
<p>{{msg2}}</p>
<p>{{msg2 | msgFormat('admin369') | test}}</p>
</div>
<script>
Vue.filter("msgFormat", function(msg, msg1) {
return msg.replace(/NBA/g, '【美职篮】' + msg1);
})
Vue.filter("test", function(msg) {
return msg + "********";
})
var vm = new Vue({
el: "#app",
data: {
msg: "今日NBA,保罗换威少,哈哈...NBA新闻真多,大家一起关注NBA..."
},
methods: {
}
})
var vm2 = new Vue({
el: "#app2",
data: {
msg2: "今日NBA很精彩,哈哈...NBA新闻真多,大家一起关注NBA..."
},
})
</script>
</body>
</html>
过滤器的使用
接着上一讲的例子,时间格式字符串格式化,通过局部过滤器来使用
filters: {
msgDataFormat: function(msg, pattern = '') {
var meta = new Date(msg);
var y = meta.getFullYear();
var m = (meta.getMonth() + 1).toString().padStart(2, 0);
var d = meta.getDate();
if (pattern == 'yyyy-MM-dd') {
return y + '-' + m + '-' + d;
}
var h = meta.getHours().toString().padStart(2, 0);
var Min = meta.getMinutes().toString().padStart(2, 0);
var secs = meta.getSeconds().toString().padStart(2, 0);
return y + '-' + m + '-' + d + ' ' + h + '-' + Min + '-' + secs;
}
}
我们发现显示的月份7最好是显示为07,这时我们可以使用一个ES6中新增的方法叫 padStart方法
方法 | 说明 |
---|---|
String.prototype.padStart(maxLength, fillString=’’) | 字符串长度为maxLength,不够的在开头用fillString填充,例如 :“123”.padStart(6,“a”)=“aaa123” |
String.prototype.padEnd(maxLength, fillString=’’) | 这个和上面类似,是在结尾处填充,例如"123".padEnd(6,“a”)=“123aaa” |