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. 美素数(HDU 4548)(打表,简化时间复杂度)

    相信大家都喜欢美的东西,让我们一起来看看美素数吧. 问题是这样的:一个十进制数,如果是素数,而且它的各位数字和也是素数,则称之为"美素数",如29,本身是素数,而且2+9 = 11 ...

  2. dwz框架

    官网:http://jui.org/index_menu.html PDF教程:http://jui.org/doc/dwz-user-guide.pdf DWZ最大的特点是使用html扩展的方式来代 ...

  3. no.10京东咚咚架构演讲读后感

    京东之与旺旺相当于淘宝,他们都是服务于买家和卖家的沟通.京东咚咚的功能比较简单,实现了一个 IM 的基本功能,接入.互通消息和状态. 另外还有客服功能,就是顾客接入咨询时的客服分配,按轮询方式把顾客分 ...

  4. java课程之团队开发冲刺阶段1.10

    一.总结昨天任务: 1.已完成系统规划总结 二.遇到的问题: 1,整合的过程中并没有的很好的处理其中的关系,应当将常用的方法总结成一个工具类便于使用.这样在二次使用的时候会便捷不少. 三.今天的任务 ...

  5. java.io.tmpdir在哪里?

    查找所在目录的方式如下: System.out.println(System.getProperty(“java.io.tmpdir”)); System.getProperty(),还可以获取更多其 ...

  6. Rancher安装 - CentOS7(Docker)环境

    Rancher安装 - CentOS7(Docker)环境 对于开发和测试环境,我们建议通过运行单个Docker容器来安装Rancher.在此安装场景中,您将在单个Linux主机上安装Docker,然 ...

  7. 01 Hello Unity

    Unity接界面布局: Hierarchy(层级视图):存放当前游戏场景内所有游戏物体 Scense(主界面):主要的游戏设计界面,开发者操作界面 Game(游戏视图):玩家视角,也是摄像机所要看到的 ...

  8. LeetCode No.166,167,168

    No.166 FractionToDecimal 分数到小数 题目 给定两个整数,分别表示分数的分子 numerator 和分母 denominator,以字符串形式返回小数. 如果小数部分为循环小数 ...

  9. Java学习十四

    学习内容: 1.Junit 2.maven安装配置环境 一.Junit实例演示步骤 1.引入jar包 junit包需要引入hamcrest-core包,否则会报错 2.测试如下代码 package c ...

  10. MySQL--InnoDB 体系架构

    InnoDB 体系架构 后台线程 Master Thread Master Thread 是一个非常核心的后台线程,主要负责将缓冲池中的数据异步刷新到磁盘,保证数据的一致性,包括脏页的刷新.合并插入缓 ...