Vue过滤器的使用(格式化日期)

过滤器的作用

格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等

自定义过滤器

Vue.filter("lower",function(val){
  return val.charAt(0).toLowerCase() + val.slice(1)
})

过滤器的使用

1. 级联操作
   <div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
2. 属性绑定
   <div :abc="msg | upper"></div>
   

    <div id="app">
      <input type="text" v-model="msg">
      <div>{{msg | upper}}</div>
      <div>{{msg | upper | lower}}</div>
      <!-- 属性绑定 -->
      <div :abc="msg | upper"></div>
    </div>
    <script>
      // 过滤器
      //首字母大写
      Vue.filter("upper",function(val){
        return val.charAt(0).toUpperCase() + val.slice(1)
      }),
      //小写
      Vue.filter("lower",function(val){
        return val.charAt(0).toLowerCase() + val.slice(1)
      })
        var vm = new Vue({
            el:"#app",
            data:{
              msg:""
            }
        });
    </script>

局部过滤

filters: {
 upper: function(val){
   return val.charAt(0).toUpperCase() + val.slice(1)
 }
}

案例：格式化日期