vue-过滤器

最新推荐文章于 2023-02-01 10:45:55 发布

lt要努力

最新推荐文章于 2023-02-01 10:45:55 发布

阅读量94

点赞数

分类专栏： Vue 文章标签： vue的过滤器 vue-filters

本文链接：https://blog.csdn.net/louting249/article/details/103100597

版权

Vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

作用
是对已经有的数据做数据格式化
使用格式
已有数据 | 过滤器名称(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要努力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-过滤器

作用是对已经有的数据做数据格式化使用格式已有数据 | 过滤器名称(arg1,arg2) // | 我们称之为管道符<img :src = "item.img | imgFilter " onerror="this.style.visibility='hidden'">过滤器的全局定义全局定义 Vue.filter(过滤器名称，回...
复制链接

扫一扫

专栏目录