Vue中filter过滤器的使用方法

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

 过滤器分为两种：

• 全局过滤器：所有组件都可以使用
• 局部过滤器：只允许在当前组件中使用

全局过滤器

我们可以新建一个filter文件夹然后新建index.js

export function html2Text(val) {
  const div = document.createElement('div')
  div.innerHTML = val
  return div.textContent || div.innerText
}

export function toThousandslsFilter(num) {
  return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
}

在main.js中引入

import * as filters from './filters' // 全局filter
// 加载过滤器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

接下来就可以在组件中使用了。

局部过滤器

export default {
    data () {
        return {
            msg: 'hello world'
        }
    },
    //定义局部过滤器。只能在当前 vue 对象中使用
    filters: {
        dataFormat: (msg, a) => { // msg表示要过滤的数据，a表示传入的参数
            return msg + a;
        }
    }
}

这样就可以在当前组件使用了。