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. 吴裕雄--天生自然 JAVASCRIPT开发学习:条件语句

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Android自定义View——彩色圆环统计图

      1.初始化变量 圆的粗细:圆环的大小. 标注:文字前面的圆点. 分配比例大小:由于需要计算圆环扫过的角度,计算方法使用:(比例/100)*360度,用百分比算出360度占用了多少,由于比例/100 ...

  3. 洛谷 P2658 汽车拉力比赛

    题目传送门 解题思路: 二分答案,然后bfs验证,如果从一个路标可以达到其它所有路标,则答案可行.知道找到最佳答案. AC代码: #include<iostream> #include&l ...

  4. Java编程知识点梳理

    1. elementAt()   temp.elementAt(0) 返回temp这个vector里面存放的第一个元素--->也是一个vector类型. 2. 字符串空格分割 String [] ...

  5. nodejs(6)express学习

    1.简单认识express express::一个快速的网站开发框架,封装了原生的http模块,用起来更方便:API更人性化 特点 基于Node.js平台之上,进一步封装了 http 模块,从而提供了 ...

  6. Codeforces 400C 矩阵乘法 数学规律

    今天下午Virtual了一套最近的CF题,第三题给TLE了,就跑过去上课了. 这题给定一个由二进制表示的矩阵,当询问3的时候,求矩阵的值,矩阵的值是所有第i行乘以第i列的值的总和,然后还有1 b是翻转 ...

  7. jenkins忘记登录密码解决方法

    第一步:修改配置文件 修改jenkins的配置文件,找到如下几行删除(删除前一定要备份) <useSecurity>true</useSecurity> <authori ...

  8. 吴裕雄--天生自然MySQL学习笔记:MySQL 临时表

    MySQL 临时表在我们需要保存一些临时数据时是非常有用的.临时表只在当前连接可见,当关闭连接时,Mysql会自动删除表并释放所有空间. MySQL临时表只在当前连接可见,如果使用PHP脚本来创建My ...

  9. 2019~2020icpc亚洲区域赛徐州站H. Yuuki and a problem

    2019~2020icpc亚洲区域赛徐州站H. Yuuki and a problem 题意: 给定一个长度为\(n\)的序列,有两种操作: 1:单点修改. 2:查询区间\([L,R]\)范围内所有子 ...

  10. CMake变量(提供信息的变量)

    目录 CMAKE_VERSION CMAKE_MAJOR_VERSION CMAKE_MINOR_VERSION CMAKE_PATCH_VERSION CMAKE_TWEAK_VERSION CMA ...