首页 > 其他分享 >vue 全局过滤器

vue 全局过滤器

时间:2022-10-14 14:44:25浏览次数:47  
标签:vue filterA js 参数 filters 过滤器 全局 message

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

这里只介绍一种就是把过滤器放到单独文件中的情况

 1、首先把全局过滤器抽离到单独的文件夹/js文件中

        比如创建这样的结构

 

 

 2、然后在main.js中引用

  import * as filters from './filters'

  然后全局注册使用循环,可以在js中添加更多的过滤方法

  // register global utility filters
  Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
  })

    

3、在模板文件中使用

    过滤器里面有个金额格式化的方法

  

 

 

 

   3.1 <!-- 在双花括号中 -->
          {{ money | formatCurrency }} // money是参数

         

         

 

 

       运行结果

       

  3.2 过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中,formatCurrency 过滤器函数将会收到 money 的值作为第一个参数。过滤器可以串联:

        {{ message | filterA | filterB }}

       在这个例子中,filterA 被定义为接收单个参数的过滤器函数,表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函                 数 filterB,将 filterA 的结果传递到 filterB 中。过滤器是 JavaScript 函数,因此可以接收参数(多参数的情况):

       {{ message | filterA('arg1', arg2) }}

      这里,filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数,普通字符串 'arg1' 作为第二个参数,表达式 arg2 的值作为第三个参数。 

       部分内容引用官网

 

标签:vue,filterA,js,参数,filters,过滤器,全局,message
From: https://www.cnblogs.com/sgdkg/p/16791509.html

相关文章

  • vue 实现动态columns,通过后台数据库存储字段,不同的表显示不同的列
    问题:vue前台定义columns太麻烦,每次需要手工定好列,如何通过数据库预留列字段,填充到前台columns中<h-tableautoHeadWidth="true"notSetWidth="true":columns="......
  • vue项目提高性能
    如何提高页面性能?精灵图、字体图标、图片懒加载或使用base64格式图片css,js文件压缩,代码复用,组件化使用CDN网络托管数据懒加载:分页,按需加载(下拉加载)......
  • uniapp-vue3-ts实现 微信小程序-视频上下滑动
    公司需求,后端被迫学习...临时记录一下后续完善暂时不会组件式开发,只能采用选项式了<template><viewstyle="color:white;"><viewclass="swiper">......
  • Vue-数据代理
    Vue中的数据代理数据代理定义所谓数据代理,就是通过一个对象代理对另一个对象中的属性的操作(读/写)。说白了就是操作一个对象上的属性可以读取和修改另一个对象上的属性,......
  • vue-utils__工具类函数
    vue-utils__工具类函数1.is判断consttoString=Object.prototype.toString;/***@description:判断值是否为某个类型*/exportfunctionis(val,type){ ret......
  • 前端成神之路-vue前端工程化
    1.模块化的分类A.浏览器端的模块化1).AMD(AsynchronousModuleDefinition,异步模块定义)代表产品为:Require.js2).CMD(CommonModuleDefinition,通用模块定义)......
  • Vue代码规范
    目录Vue代码规范简洁汇总函数方法常用动词汇总结构化规范目录文件夹及子文件规范vue文件基本结构元素规范元素特性的顺序组件选项顺序详细Vue代码规范好文推荐Vue代码规......
  • vue+elementui+axios环境搭建
    1.去官网下载安装node.js,安装后用命令检测版本信息node-vnpm-v2.安装vue环境#安装淘宝npmnpminstall-gcnpm--registry=https://registry.npm.......
  • 利用a标签实现文件下载功能(ant design vue可用)
    #利用a标签实现文件下载功能(antdesignvue可用)##代码和注释```letfileUrl=“”//所下载文件的网络地址letfileName=“”//下载成功后保存的文件名//创建一个a标......
  • Vue3+Element-plus 报错记录
    目录Vue3+Element-plus报错记录报错信息错误场景还原问题排查错误代码el-select多选Vue3+Element-plus报错记录报错信息TypeError:Cannotreadpropertiesofnull......