0
点赞
收藏
分享

微信扫一扫

Vue过滤器filter

毅会 2022-02-06 阅读 61

全局过滤器

// global-filter是过滤器名称
// 函数第一个参数是需要过滤的数据.
// 函数第二个参数是给过滤器传递的值.
  Vue.filter('global-filter',(val,...args)=>{
    console.log(`需要过滤的数据是:${val}`)
    return val + ' 过滤器追加的数据'
  })

 

var app = new Vue({
    el: '#app',
    data: {
      price:null,
      oldValue: '原始数据'
    })

 

 <div id='app'>
    <p>{{oldValue | global-filter}}</p>
  </div>

 

局部过滤器

全局过滤器通过 Vue.filter('filtername',fliterFn) 来定义,它定义好了之后,在所有的组件内都可以使用.
局部过滤器,定义在组件内部 filters 属性上.它只能在此组件内部使用.

 

 var app = new Vue({
    el: '#app',
    data: {
      price:null,
      oldValue: '原始数据'
    },
    methods: {},
    // 定义组件过滤器
    filters: {
      priceFmt(val,location) {
        switch(location) {
          case 'usa':
            return '$' + val
            break
          default:
          return val
        }
      }
    })

 

注意:全局注册时是filter,没有s的。而组件过滤器是filters,是有s的,这要注意了,虽然你写的时候没有s不报错,但是过滤器是没有效果的
使用位置

  1. 在双花括号插值
{{ 'ok' | globalFilter }}

 

  1. v-bind表达式中使用
<div v-bind:data="'ok' | globalFilter" ></div>

 

  1. 过滤器的连用
{{ message | filterA | filterB }}

 

举报

相关推荐

【VUE】过滤器Filter

vue filter 过滤器

过滤器filter

Filter过滤器

过滤器-filter

【笔记】过滤器filter

Filter过滤器《笔记》

Filter过滤器(超详细)

0 条评论