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. Innodb特性以及实现原理

    Innodb五大特性 1.insert buffer2.double write3.自适应哈希索引4.异步io5.邻接页刷新 1.insert buffer(change buffer) 作用:将非聚 ...

  2. spring boot redis 缓存(cache)集成

    Spring Boot 集成教程 Spring Boot 介绍 Spring Boot 开发环境搭建(Eclipse) Spring Boot Hello World (restful接口)例子 sp ...

  3. Python logging模块 控制台、文件输出

    步骤 导入logging模块 设置level(此处是DEBUG) 添加文件handler和流handler import logging logger=logging.getLogger(__name ...

  4. xv6 系统调用

    1. 系统调用的实现 开发程序需所有的接口在user.h中,包含两部分system call和ulib user.h中的系统接口函数在usys.S中通过汇编实现 #define SYSCALL(nam ...

  5. GRUB&MBR引导

    (ubuntu下搜索gnome-disk可以打开磁盘管理) 简单开机过程 : ①按下电源后,计算机自检(POST),如果硬件设备(CPU.内存.硬盘.光驱.各种卡)都没有问题,BIOS会检查各个硬盘的 ...

  6. 利用zed相机为rtabmap_ros录制rosbag包及其使用

    1,录制rosbag包 rosbag record /zed_node/rgb/image_rect_color /zed_node/rgb/camera_info /zed_node/depth/d ...

  7. UVA 11584 入门DP

    一开始把它当成暴力来做了,即,从终点开始,枚举其最长的回文串,一旦是最长的,马上就ans++,再计算另外的部分...结果WA了 事实证明就是一个简单DP,算出两个两个点组成的线段是否为回文,再用LCS ...

  8. JNI传递修改自定义Java Class数组数据

    声明:迁移自本人CSDN博客https://blog.csdn.net/u013365635 结合前面讲的2篇关于JNI的文章,这里直接把代码贴上,主要是要知道如果传递自定义Class Array的时 ...

  9. Springboot整合mongodb时无法连接数据库

    由于之前没有接触过mongodb,最近在学习时遇到了一些问题.用yml配置mongodb如下: spring: application: name:xc-service-manage-cms data ...

  10. socket实践编程1

    1.服务器端程序编写 (1).socket (2).bind (3).listen (4).accept,返回值是一个fd,accept正确返回就表示我们已经和前来连接我的客户端之间建立了一个TCP连 ...