vue filter(过滤器)的使用

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 后面

1. 局部过滤器

filters: {      //与data平级
    num(val) {
      return val + '过滤'
    }
  }
  // 使用:
  <div>
    {{msg | num}}
  </div>

2. 全局过滤器

// 在main.js中注册全局过滤器:
Vue.filter('num',val => {
 return val+ '全局过滤'
})

// 使用:
  <div>
    {{msg | num}}
  </div>

3. 一次注册多个全局过滤器的方法一

// 目录结构如下图,在filters下的index.js文件写入如下内容:
import test1 from '../function/a.js'
import test2 from '../function/b.js'
import more from '../function/c.js'

export default {
    test1:test1.test1,     // 如果这个js文件只有一个方法需要导出,
    // 而且使用的是export default test1(也就是没加大括号),那这里就可以简写成test1
    // 当export default 后面不加大括号代表直接导出值,加了相当于外面又套了一层对象,所以需要.语法
    test2:test2.test2,
    aaa: more.aaa,
    bbb: more.bbb
}

// 然后在main.js中注册全局过滤器:
import filters from '@/utils/filters'

Object.keys(filters).forEach(filter=>{
  console.log(filter)  // 打印每个js文件内的方法名
  console.log(filters[filter]);
  Vue.filter(filter,filters[filter])
})

4. 一次注册多个全局过滤器的方法二:(这个适合过滤器比较多的情况)

首先创建需要的文件: 如下图目录结构:

// 我们将过滤的方法都放在function里面方便统一处理
// 以其中一个js文件为例:
function aaa() {
    return 1
}
function bbb() {
    return 2
}
export default {
    aaa,
    bbb
}
// 这样就导出了过滤的方法,

// 然后在filter文件夹下的index.js中导入并处理:
import Vue from 'vue'
// 这个方法引用的注册全局组件的方法
const contexts = require.context('../function', false, /\.js$/)   
contexts.keys().forEach(filter => {
    console.log(filter)   // 这里打印匹配到的文件 a.js   b.js ....
    const filterEntity = contexts(filter).default
    console.log(filterEntity)   //这里打印匹配到的每个js文件数据:   
    // 例如上面的c.js在这里就转为{  {aaa:function  aaa(){...}, {bbb:function bbb(){}}   }
// 所以这里通过遍历对象取到每个文件里面的方法名以及值
    Object.keys(filterEntity).forEach(name=>{    
        Vue.filter(name,filterEntity[name])
    })
})

// 最后在main.js中全局导入这个文件:
import  '@/utils/filters'

5. 局部过滤器使用外部的js文件

// 尤其一个js文件被用作全局方法,但是有个地方你又需要把他当做过滤器使用,因为使用频率低,所以放在局部
// 首先在需要用的组件内导入这个js文件
import fils from '@/utils/function/c.js'

// 然后注册局部过滤器:
// 与data平级,因为引入的fils正是js文件这个对象,所以直接赋值
filters: fils,   
 
// 最后使用:
<div>{{msg | a'a'a}}</div>