フィルタは汎用なテキストフォーマット処理をします。
例えば、日付の表示形式を【YYYY年mm月dd日】や【YYYY.mm.dd】にしたり数字に【,】を差し込んだり。。
今回は、new Date()で取得したもののフォーマットを変更します。
コード
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- vueのスクリプトを読み込むCDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.11/dist/vue.js"></script>
<title>VueTest２</title>
</head>
<body>
<h1>Vueテスト２</h1>
<div id="app">
<p>フィルター処理例 {{ | numberWithDelimiter}}</p>
</div>
<!-- 以下は適宜変更してください -->
<script src="./js/vue1.js"></script>
</body>
</html>
Javascript
var items = new Date();
var vm = new Vue({
el: '#app',
data: {
items: items
},
filters: { // この節で追加したフィルタの定義
numberWithDelimiter: function (value) {
if (!value) {
return '0'
}
return datetostr(value, 'Y年MM月DD日(WW)', false);
}
}
});
function datetostr(date, format, is12hours) {
var weekday = ["日", "月", "火", "水", "木", "金", "土"];
if (!format) {
format = 'YYYY年MM月DD日(WW)'
}
var year = date.getFullYear();
var month = (date.getMonth() + 1);
var day = date.getDate();
var weekday = weekday[date.getDay()];
var replaceStrArray =
{
'YYYY': year,
'Y': year,
'MM': ('0' + (month)).slice(-2),
'M': month,
'DD': ('0' + (day)).slice(-2),
'D': day,
'WW': weekday
};
var replaceStr = '(' + Object.keys(replaceStrArray).join('|') + ')';
var regex = new RegExp(replaceStr, 'g');
ret = format.replace(regex, function (str) {
return replaceStrArray[str];
});
return ret;
}
結果
