过滤器

最新推荐文章于 2023-12-14 08:45:00 发布

weixin_44889992

最新推荐文章于 2023-12-14 08:45:00 发布

阅读量307

点赞数

分类专栏： vue 文章标签：过滤器

本文链接：https://blog.csdn.net/weixin_44889992/article/details/89515039

版权

vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

过滤器

vue 1.x版本一共提供了10个过滤器，但是不满足人们使用，vue2.x全部不提供了，交给开发者自己写
但是vue提供了定义过滤器的方式
过滤器：对数据进行格式化的一个函数
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
过滤器用给一个 ’ | ’ 表示，我们称之为 ‘管道符’

过滤器-局部

<body>
       <div id="app">
         <p>
           {{ time }}
           {{ time | timeFilter('/') }}
          </p>
      </div>
</body>
<script>
/*
需求： 1556002660676 --》 2019-4-23
需求： 1556002660676 --》 2019/4/23
*/
new Vue({
        el: '#app',
data: {
      time: Date.now()
      },
     filters: {
           timeFilter( value,type ){
            const date = new Date( value )
            const result = date.getFullYear() + type + (date.getMonth() + 1) + type +date.getDate()
            return result
     }
   }
})
</script>

过滤器-全局

<body>
         <div id="app">
           <p>
              {{ time }}
             {{ time | timeFilter('/') }}
           </p>
        </div>
</body>
<script>
/*
需求： 1556002660676 --》 2019-4-23
需求： 1556002660676 --》 2019/4/23
*/
// Vue.filter(filterName,callback(value))
Vue.filter('timeFilter',function( value , type ){
            const date = new Date( value )
            const result = date.getFullYear() + type + (date.getMonth() + 1) + type + date.getDate()
            return result
     })
new Vue({
        el: '#app',
        data: {
        time: Date.now()
}
})
</script>

weixin_44889992

关注

0
点赞
踩
0

收藏

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

过滤器vue 1.x版本一共提供了10个过滤器，但是不满足人们使用，vue2.x全部不提供了，交给开发者自己写但是vue提供了定义过滤器的方式过滤器：对数据进行格式化的一个函数过滤器可以用在两个地方：双花括号插值和 v-bind 表达式过滤器用给一个 ’ | ’ 表示，我们称之为 ‘管道符’过滤器-局部<body> <div id="app...
复制链接

扫一扫

专栏目录