Vue过滤器(局部和全局过滤)

Vue框架中,过滤器用于数据格式化,如货币、日期等。Vue 1.x内置了10个过滤器,但在2.x中移除,推荐使用自定义过滤器。过滤器可通过全局或局部定义,并用管道符`|`来应用到数据上。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

过滤器

  1. 什么是过滤器?
    用来格式化数据的一个函数 例如: $ 10 ‘$’ + price 日期的格式化

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

  1. 使用方式
    1. 全局定义过滤器
     <p> {{ time | timeFilter('/')}} </p>
    
       Vue.filter('timeFilter',function ( val,type ) {
         console.log( val )
         //val 就是我们获得的数据
         // return newVal   return 的结果就是格式化之后的新数据  return的结果就是页面呈现的结果
    
         var date = new Date ( val )
    
         // 2019-6-26
    
         return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
       })
    
    1. 局部定义过滤器
  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()
      }
    }
  })

  1. 过滤器要想获得我们的数据,要通过一个叫做 ‘管道符 | ’ 来获取数据
  2. 过滤器是对已经有的数据进行格式化,也就是必须先有数据,在去格式化
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值