vue2 全局过滤器 filters

前端小程

已于 2022-06-20 16:21:12 修改

阅读量920

点赞数

文章标签：前端 javascript vue.js

于 2022-06-20 15:59:45 首次发布

本文链接：https://blog.csdn.net/CSSAJBQ_/article/details/125374004

版权

当我们需要反复使用过滤器或多个组件使用的过滤器相同时应该考虑全局过滤器。

方法一：
在main.js 中直接注册


Vue.filter('MyFilter', function (value) {
  // 返回处理后的值
    return value + "元"
})

在组件中使用

 <div class="shopprice">{{ price | MyFilter}}</div>

方法二：
建立公共文件

在src目录下新建filters 文件夹
src > filters >filter.js
在filter.js定义过滤器num

export function num(price) {
    price = Number(price).toFixed(2);
    return `￥ ${price} 元`;
}
export default {num}

src > filters >index.js

import Vue from 'vue'
import filters from './filter'
Object.keys(filters).map(k=>{
    Vue.filter(k,filters[k])
})

在main.js 中引入

import './filters/index' //全局过滤器

在组件中使用

 <div class="shopprice">{{ price | num }}</div>

局部过滤器
在组件中：
filters与data同级

  <!-- 只有一个参数：message  过滤得到12元-->
  <p>{{ message | nums }}</p>
  <!-- 传了三个参数    过滤得到12arg1999-->
  <p>{{ message | filterA("arg1", arg2) }}</p>

data() {
    return {
      message: "12",
      arg2: 999
    }
},
 filters: {
    nums: function (value) {
      return value + "元";
    },
    filterA: function (a, b, c) {
      // 参数a 调用它的变量message
      // 参数b 字符串 'arg1',
      // 参数c 变量 arg2
      return a + b + c;
    },
  },