vue filter 过滤器详解

Vue.js 允许你自定义过滤器filter，可被用于一些常见的文本格式化。

（注意vue版本号不同用法也稍有不同）

接下来咱们就记录一下最常用的filter过滤器用法。（该示例以多个过滤器为例，当然你也可以删掉第二个过滤器自行测试）

1、首先再src目录下新建目录 filter
2、在filter目录下创建文件 index.js文件，将项目中的所有过滤器函数统一管理在index.js中。

3、在需要的组件中使用过滤器 filterFun1 与 filterFun2 过滤器函数将会被定义在 filter目录下的index.js中

<template>
<div><ul><!--添加两个过滤器,注意不要冲突,注意先后顺序--><!-- 过滤器函数总接收表达式的值 (item.id) filterFun1 过滤器函数将会收到 item.id 的值作为第一个参数--><!-- filterFun1 被定义为接收单个参数的过滤器函数，表达式 item.id  的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterFun2，将 filterFun1 的结果传递到 filterFun2 中。 --><li v-for="item in list" :key="item.id">{{item.id | filterFun1(item.name,item.age) | filterFun2}}</li></ul>
</div></template>
<script>
export default {data(){return{list:[{"id":0,"name":"张三","age":"18",'address':'北京市'},{"id":1,"name":"李四","age":"19",'address':'南京市'},{"id":2,"name":"王五","age":"20",'address':'东京市'},]}},methods:{}
}
</script>

4、在filter目录下的index.js中定义对应得过滤器函数，如下

//项目中的过滤器都定义在此文件中，统一管理
//下面是已经定义好的两个例子
const filterFun1 = function(val,parms1,parms2) {return val+parms1+parms2;//默认第一个参数就是默认要过滤的那个值
};
const filterFun2 = function(val) {return '人物介绍：'+val;
}
export {filterFun1,filterFun2
}

5、多个过滤器时，前一个过滤器会将返回值传给下一个过滤器，最后展示得文本以最后一个过滤器返回值为准。

6、运行结果如下：

vue filter 过滤器详解相关推荐

【Servlet】Filter过滤器详解、使用示例
Filter过滤器讲解定义过滤器处于浏览器与servlet之间,是一个实现了 javax.servlet.Filter 接口的 Java 类客户端发送的请求.服务器发送的资源,需要通过过滤器,才 ...
javaweb项目Filter过滤器详解
Filter也称之为过滤器,它是Servlet技术中比较激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或静态 ht ...
logstash filter 过滤器详解
一.grok 正则捕获插件 grok是一个十分强大的logstash filter插件,他可以通过正则解析任意文本,将非结构化日志数据解析成结构化和方便查询的结构.是目前logstash 中解析非结构 ...
HBase的布隆过滤器详解
HBase的布隆过滤器详解 1.布隆过滤器的简单介绍 2.布隆过滤器的原理分析 2.1 哈希表存在的问题 2.2 布隆过滤器的原理 2.2.1 原理详解 2.2.2 布隆过滤器失误率的调节 2.2.3 ...
JavaWeb中filter的详解及应用案例
JavaWeb中filter的详解及应用案例转载自:http://www.cnblogs.com/vanl/p/5742501.html 一:Filter介绍 Filter可认为是Servlet的一 ...
android edittext 过滤英文名称,Android 限制edittext 整数和小数位数过滤器(详解)
写了一个过滤器,根据需要限制edittext输入的整数和小数位,如下代码: package allone.verbank.apad.client.component; import android.t ...
Photoshop CS 中的“照片滤镜/Photo Filter”命令详解(转)
Photoshop CS 中的"照片滤镜/Photo Filter"命令详解(转)[@more@] 这是一个跟摄影有关的重要图像调整命令. 有关这一命令的教程,现在网上没一个能说得 ...
vue组件component详解
vue组件component详解组件介绍组件: 组件是拥有一定功能多个html标签的集合体,是对html标签的封装. 好处: 模板中为了实现一个(例如分页)效果,需要绘制20个html标签 ...
vue+filter过滤器（多参数）传参 - 代码篇
vue+filter过滤器(多参数)传参 - 代码篇传1个参数 //html {{a1 | filterAa}} //js filters:{filterAa(a1){// a1是传入的参数} } ...

vue filter 过滤器详解

Vue.js 允许你自定义过滤器filter，可被用于一些常见的文本格式化。

（注意vue版本号不同用法也稍有不同）

vue filter 过滤器详解相关推荐

最新文章

热门文章

vue filter 过滤器 详解

Vue.js 允许你自定义过滤器filter，可被用于一些常见的文本格式化。

（注意vue版本号不同 用法也稍有不同）

vue filter 过滤器 详解相关推荐

最新文章

热门文章

vue filter 过滤器详解

（注意vue版本号不同用法也稍有不同）

vue filter 过滤器详解相关推荐