自定义过滤器：

方式一：双大括号表达式    {{ message | capitalize }}

方式二：数据绑定v-bind     <div v-bind:id="rawId | formatId"></div>

moment库的安装命令  npm install moment --save

过滤器符合   |   表示过滤器 下面的date | datefmt 是过滤器的方法名 

<div id='app'>
  <h2>显示格式化的日期和时间</h2>
  <p>{{date}}</p>
  <p>完整日期:{{date | datefmt }}</p>
</div>

<script>
/**引入moment库**/
import moment from 'moment'    
/* 自定义过滤器名字叫 datefmt */
Vue.filter('datefmt',function(value,formatString){
   return moment(value).format(formatString || 'YYYY-MM-DD HH:mm:ss')
})
new Vue({
  el:'app,
  data:{date:new Date()}
)}
</script>

组件中定义过滤器

通过Vue对象的filter属性定义
如：

new Vue({
  filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}
})

 

全局定义过滤器

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})