10.過濾器

理解過濾器

• 功能: 對要顯示的數據進行特定格式化後再顯示
• 注意: 並無改變本來的數據, 但是產生新的對應的數據

定義和使用過濾器

• 定義過濾器

Vue.filter(filterName, function(value[,arg1,arg2,...]){
// 進行必定的數據處理
return newValue
})

• 使用過濾器

<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>

編碼

<div id="test">
<p>當前時間爲: {{currentTime}}</p>
<p>當前時間 1 爲: {{currentTime | dateStr}}</p>
<p>當前時間 2 爲: {{currentTime | dateStr('YYYY-MM-DD')}}</p>
<p>當前時間 3 爲: {{currentTime | dateStr('HH:mm:ss')}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript"
src="https://cdn.bootcss.com/moment.js/2.19.0/moment.js"></script>
<script>
// 註冊過濾器
Vue.filter('dateStr', function (value, format) {
return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
})
new Vue({
el: '#test',
data: {
currentTime: new Date()
}
})
</script>