Custom Filter in Vue.js
Custom Filter in Vue.js
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<div id="app">
<table border=1>
<tr>
<th class="invalid">Format</th>
<th>Result</th>
<th>Result</th>
</tr>
<tbody>
<tr>
<td>MMM Do YYYY</td>
<td>{{date | MMMMDoYYYY}}</td>
<td>{{MMMMDoYYYY(date)}}</td>
</tr>
<tr>
<td>YYYY-MM-DD HH:mm</td>
<td>{{date | YYYY_MM_DD_HH_mm}}</td>
</tr>
<tr>
<td>dddd, MMMM Do YYYY, h:mm:ss a</td>
<td>{{date | dddd_MMMM_Do_YYYY_h_mm_ss_a}}</td>
</tr>
</tbody>
</table>
</div>
JavaScript
var vue = new Vue({
el: '#app',
data: {
date: 87655354
},
filters: {
MMMMDoYYYY: function(value) {
return moment.unix(value).format('MMM Do YYYY');
},
YYYY_MM_DD_HH_mm: function(value) {
return moment.unix(value).format('YYYY-MM-DD HH:mm');
},
dddd_MMMM_Do_YYYY_h_mm_ss_a: function(value) {
return moment.unix(value).format('dddd, MMMM Do YYYY, h:mm:ss a');
}
}
});