当前位置: 首页 > news >正文

vue filters过滤器分别在template和script中使用

文章目录

    • 全局注册过滤器与局部注册:
      • 1.全局注册过滤器使用:
      • 2.局部注册过滤器使用:
    • 使用该过滤器如下:

全局注册过滤器与局部注册:

1.全局注册过滤器使用:

新建了filter.js文件,然后再把该文件导入到main.js实现全局使用。
filter.js写过滤器规则:例如(身份证掩码格式:441222********0080)

Vue.filter('idCardMask', function(text) {
  if (text && text.length == 18) {
    return text.substring(0,6) + '********' + text.substring(14,18)
  }else {
    return text
  }
    
})

2.局部注册过滤器使用:

在vue文件中export default里面增加filters:

在这里插入图片描述

使用该过滤器如下:

1.template中使用:(通过{{a | 过滤器的名字}}这种写法将a传入作为过滤器(idCardMask)text的实参):
在这里插入图片描述
2.script中使用
格式:this.$options.filters[‘过滤器名称’](参数)
在这里插入图片描述

相关文章:

  • ssm毕设项目基于Java的城市公交查询系统ac5p2(java+VUE+Mybatis+Maven+Mysql+sprnig)
  • unity sdk -AppLovin MAX 广告聚合平台接入+Firebase统计
  • C#手动填充DataSet
  • coreutils5.0 uname命令和源码分析
  • OpenGL入门(四)之纹理Texture
  • UDP和TCP协议发送接收数据
  • Apache Doris 快速学习大纲
  • FastFlow(5)---软件加速器 software accelerator
  • 华为OD:0019-0020:-最小步骤数—删除字符串中出现次数最少的字符
  • Python学生成绩管信息理系统(面向对象)(学生信息篇)
  • 国稻种芯百团计划行动 丰收节贸促会·袁隆平:水稻国际竞争
  • 面试精选:3、史上最详细的Linux精选面试题(二)
  • 2.21 haas506 2.0开发教程 - TTS - Text To Speech (320开发板)
  • Promethues-如何监控容器
  • 测试人生 | 从小团队的业务到独角兽的测开,涨薪超过60%,90后小哥哥凤凰涅槃了
  • $translatePartialLoader加载失败及解决方式
  • @jsonView过滤属性
  • 【知识碎片】第三方登录弹窗效果
  • 03Go 类型总结
  • bearychat的java client
  • - C#编程大幅提高OUTLOOK的邮件搜索能力!
  • CSS实用技巧干货
  • Git学习与使用心得(1)—— 初始化
  • isset在php5.6-和php7.0+的一些差异
  • JavaScript设计模式系列一:工厂模式
  • LeetCode18.四数之和 JavaScript
  • Redis学习笔记 - pipline(流水线、管道)
  • SpiderData 2019年2月16日 DApp数据排行榜
  • windows下如何用phpstorm同步测试服务器
  • 百度贴吧爬虫node+vue baidu_tieba_crawler
  • 微信开源mars源码分析1—上层samples分析
  • 一天一个设计模式之JS实现——适配器模式
  • ​Java并发新构件之Exchanger
  • ​总结MySQL 的一些知识点:MySQL 选择数据库​
  • #laravel 通过手动安装依赖PHPExcel#
  • (2.2w字)前端单元测试之Jest详解篇
  • (Repost) Getting Genode with TrustZone on the i.MX
  • (附源码)spring boot车辆管理系统 毕业设计 031034
  • (附源码)springboot家庭装修管理系统 毕业设计 613205
  • (四)c52学习之旅-流水LED灯
  • (五)关系数据库标准语言SQL
  • (转)Spring4.2.5+Hibernate4.3.11+Struts1.3.8集成方案一
  • (转)甲方乙方——赵民谈找工作
  • .Net 6.0 处理跨域的方式
  • .Net CF下精确的计时器
  • .net core 6 集成 elasticsearch 并 使用分词器
  • .net php 通信,flash与asp/php/asp.net通信的方法
  • .NET/C# 利用 Walterlv.WeakEvents 高性能地中转一个自定义的弱事件(可让任意 CLR 事件成为弱事件)
  • .NET命名规范和开发约定
  • .NET企业级应用架构设计系列之应用服务器
  • .NET中使用Protobuffer 实现序列化和反序列化
  • @ModelAttribute 注解
  • [14]内置对象
  • [android] 手机卫士黑名单功能(ListView优化)
  • [C# 开发技巧]实现属于自己的截图工具