vue-过滤器

作用
是对已经有的数据做数据格式化
使用格式
已有数据 | 过滤器名称(arg1,arg2)     //  | 我们称之为 管道符

<img 
     :src = "item.img | imgFilter "
     onerror="this.style.visibility='hidden'"
>

过滤器的全局定义

全局定义
  Vue.filter(过滤器名称，回调函数)

<body>
  <div id="app">
    <button @click = "getTime"> 获得时间 </button>
    <p> {{ time | timerFilter }} </p>
  </div>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  /* 过滤器 
    全局定义
      Vue.filter(过滤器名称，回调函数)
  */
  new Vue({
    el: '#app',
    data: {
      time: ''
    },
    methods: {
      getTime () {
        this.time = new Date()
      }
    },
    filters: {
      'timerFilter': function ( val ) {
        var date = new Date( val )
        if ( val ) {
          return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日'
        } else {
          return ''
        }
      }
    }
  })
</script>

过滤器的局部定义

局部定义
   filters选项

<body>
  <div id="app">
    <button @click = "getTime"> 获得时间 </button>
    <p> {{ time | timerFilter }} </p>
  </div>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  /* 过滤器 
    局部定义
     filters选项中写
  */
  new Vue({
    el: '#app',
    data: {
      time: ''
    },
    methods: {
      getTime () {
        this.time = new Date()
      }
    },
    filters: {
      'timerFilter': function ( val ) {
        var date = new Date( val )
        if ( val ) {
          return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日'
        } else {
          return ''
        }
      }
    }
  })
</script>

lt要努力

发布了55 篇原创文章 · 获赞 8 · 访问量 1778

私信关注

过滤器的全局定义

过滤器的局部定义

猜你喜欢