Vue中的过滤器

最新推荐文章于 2024-02-20 00:00:00 发布

于思杨

最新推荐文章于 2024-02-20 00:00:00 发布

阅读量2.4k

点赞数 2

文章标签： vue javascript

本文链接：https://blog.csdn.net/huhu_nihao/article/details/93785908

版权

Vue中的过滤器

一、什么是过滤器？

用来格式化数据的一个函数
vue 1.x 版本借鉴了 angular , 提供 10 个过滤器，包括有：日期小数点位数保留货币大小写等
Vue 2.x 废弃了这 10个过滤器，但是它提供了自定义过滤器的方式

二、使用方式

全局定义过滤器

<body>
  <div id="app">
    <p> {{ time | timeFilter('=')}} </p>
  </div>
</body>

<script>
  /* 
    Vue.filter( 过滤器的名称， 过滤器的回调函数 )
  */

  Vue.filter('timeFilter',function ( val,type ) {
    console.log( val )
    //val 就是我们获得的数据
    // return newVal   return 的结果就是格式化之后的新数据  return的结果就是页面呈现的结果

    var date = new Date ( val )

    // 2019-6-26   2019/6/26

    return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
  })

  new Vue({
    el: '#app',
    data: {
      time: Date.now()
    }
  })
</script>

局部定义过滤器

<body>
  <div id="app">
    <p> {{ time | timeFilter('=')}} </p>
  </div>
</body>

<script>
  new Vue({
    el: '#app',
    data: {
      time: Date.now()
    },
    filters: { //过滤器的配置项
      'timeFilter': function ( val,type ){
        var date = new Date ( val )
        return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
      }
    }
  })
</script>

过滤器要想获得我们的数据，要通过一个叫做 ”管道符 | “的来获取数据
过滤器是对已经有的数据进行格式化，也就是必须先有数据，再去格式化

于思杨

关注

2
点赞
踩
4

收藏

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

Vue中的过滤器一、什么是过滤器？用来格式化数据的一个函数vue 1.x 版本借鉴了 angular , 提供 10 个过滤器，包括有：日期小数点位数保留货币大小写等Vue 2.x 废弃了这 10个过滤器，但是它提供了自定义过滤器的方式二、使用方式全局定义过滤器<body> <div id="app"> <p>...
复制链接

扫一扫