Vue.js 允许我们自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值表达式、 v-bind表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示。

1.  插值表达式

<p>{{msg | msgFormat}}</p>

管道符前面的msg:要过滤的内容

管道符后面的msgFormat:是过滤器通过msgFormat来过滤

2. 定义过滤器msgFormat

var vm = new Vue({
el: '#app',
data: {
msg: '我想我是是世界上最好看的'
},
methods: {},       
       filters: { msgFormat: function (myMsg) { //function 的第一个参数指的是管道符前面的 msg
        return myMsg.replace(/我/g, '你')         }
      }
});

vue中过滤器filter的更多相关文章

  1. vue 中全局filter过滤器的配置及使用

    在项目中使用到的经常用到过滤器,比如时间,数据截取等过滤器,如果在每个.vue中都可以复制同一个过滤器,这可以达到目的,但是遇到方法有bug时就需要诸葛修改进入不同的页面修改,这样既费时又费力,优先可 ...

  2. Spring中过滤器(Filter)和拦截器(Interceptor)的区别和联系

    在我们日常的开发中,我们经常会用到Filter和Interceptor.有时同一个功能.Filter可以做,Interceptor也可以做.有时就需要考虑使用哪一个比较好.这篇文章主要介绍一下,二者的 ...

  3. vue中过滤器比较两个数组取相同值

    在vue中需要比较两个数组取相同值 一个大数组一个 小数组,小数组是大数组的一部分取相同ID的不同name值 有两种写法,两个for循环和map写法 const toName = (ids, arr) ...

  4. vue的过滤器filter

    前记: 排版记录,未免太耽误时间,我就简单的来,下面是一个vue 过滤器的写法,demo 演示,限制一个字符串的长度. vue filter 的官网介绍 https://cn.vuejs.org/v2 ...

  5. vue基础----过滤器filter

    1.用的场景:一个功能在每个组件都能用,而computed虽然有缓存,但不能用在每一个组件,需要的话的每一个都需要写. 2.特点:改变数据的展示形式,不改变原有的形式  分为全局与局部的 <di ...

  6. Vue学习之--------Vue中过滤器(filters)的使用(代码实现)(2022/7/18)

    1.过滤器 1.1 概念 过滤器: 定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理). 语法: 1.注册过滤器:Vue.filter(name,callback) 或 new V ...

  7. vue中过滤器filters的使用

    组件内写法 filters:{ filter:function(data,arg1,arg2){ return .... } } 全局写法 filters('filter',function(data ...

  8. JavaWeb中过滤器Filter的url-pattern设置

    源码 https://github.com/YouXianMing/Java-Web-Study/tree/master/Servlet-Filter-UrlPattern Filter顺序以及url ...

  9. JavaWeb中过滤器Filter的使用示例

    https://github.com/YouXianMing/Java-Web-Study/tree/master/Servlet-Filter 过滤器示例基于以下流程 测试效果如下 web.xml配 ...

随机推荐

  1. DevOps元数据管理

    元数据是自动化运维的基础,对元数据的管理和查询贯穿整个运维的生命周期.我们从一个元数据的使用场景开始: 双十一抢购火热进行中,某电商后端实例的日志中出现了502错误码,运维平台监测到该异常并发送告警给 ...

  2. 在阿里云Centos7.6中部署nginx1.16+uwsgi2.0.18+Django2.0.4

    上次在网上找了一个在阿里云Centos7.6中部署nginx1.16+uwsgi2.0.18+Django2.0.4的文档,可能是这个文档不是最新版的,安装的时候遇到了很多问题, 最后跟一个大神要了一 ...

  3. textare限制拖动;提示文字(点击消失,不输入恢复提示信息)

    1.在textarea添加一个样式:style="resize:none;" 2.提示文字(鼠标点击的时候消失,不输入恢复提示信息): <input name="t ...

  4. POJ 1416:Shredding Company

    Shredding Company Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 4713   Accepted: 2714 ...

  5. VMware Workstation 12 PRo密钥

    注意:手动输入(起初复制输入,一个都没成功,不要偷懒哦) VMware Workstation 12序列号: 5A02H-AU243-TZJ49-GTC7K-3C61N

  6. Python Learning Day4

    ---恢复内容开始--- 遇到的模块 NumPy:多维数组的有效操作. 高效的数学函数. Matplotlib:可视化:2D和(最近)3D图 SciPy:大型库实现各种数值算法,例如: 线性和非线性方 ...

  7. JavaScript 之 web API

    1.获取元素 document.getElementById('标签的id值'); document.getElementsByTagName('标签名'); document.getElements ...

  8. DevOps云翼日志服务实践

    10月30日,全球权威数据调研机构IDC正式发布<IDCMarketScape:中国DevOps云市场2019,厂商评估>报告.京东云凭借丰富的场景和实践能力,以及高质量的服务交付和平台稳 ...

  9. NiFi_Demo_调度示例

    1.背景 要求:每天凌晨1:00后开始每2min执行一次sql查询 2.作业编排 3.各模块配置 3.1 GenerateFlowFile 作用:用于产生flowfile,该flowfile内容为空. ...

  10. UML-状态机图和建模

    1.目标:如何画状态机图 2.定义:描述某个对象的状态.感兴趣的事件.以及对象响应该事件的行为. 转换:用箭头表示 状态:用圆角矩形表示 事件:指的是一件值得注意的事情的发生.如:拿起电话. 当事件“ ...