Vue.js 允許你自定義過濾器序矩，可被用于一些常見的文本格式化侦鹏。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達(dá)式 (后者從 2.1.0+ 開始支持)旺入。過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部趁尼，由“管道”符號指示：
在雙花括號中
{{ message | capitalize }}在
v-bind中
<div v-bind:id="rawId | formatId"></div>
過濾器實例——文本內(nèi)容截取和日期時間格式化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js-過濾器練習(xí)-字符串的截取和時間格式的轉(zhuǎn)換</title>
<!-- 通過CDN引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h3>處理前</h3>
<h4>{{message}}</h4>
<h4>{{time}}</h4>
<hr>
<h3>處理后</h3>
<h4>{{message | handleMessage}}...</h4>
<h4>{{ time | formatDate }}</h4>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: '江蘇省南京市仙林大學(xué)城羊山北路1號南京工業(yè)職業(yè)技術(shù)學(xué)院計算機與軟件學(xué)院軟件1721班',
time: new Date()
},
methods: {},
computed: {
handleMessage: function() {
return this.message.substring(0, 11);
}
},
filters: {
formatDate: function(date) {
var d = new Date(date);
var year = d.getFullYear();
var month = d.getMonth() + 1;
var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate();
var hour = d.getHours() < 10 ? '0' + d.getHours() : '' + d.getHours();
var minutes = d.getMinutes() < 10 ? '0' + d.getMinutes() : '' + d.getMinutes();
var seconds = d.getSeconds() < 10 ? '0' + d.getSeconds() : '' + d.getSeconds();
return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
},
handleMessage: function(msg) {
return msg.substring(0, 11);
}
}
})
</script>
</body>
</html>
運行結(jié)果
