Vue.js 内置了10个过滤器，下面简单介绍它们的功能和用法。

①capitalize：字符串首字符转化成大写

②uppercase：字符串转化成大写

③lowercase ：字符串转化成小写

④currency 参数为{String}[货币符号] ,{Number} [小数位]，将数字转化成货币符号，并且会自动添加数字分节号。{{ amount | currency '￥' 2 }} // -> 若amount10000，则输出￥10,000.00

⑤pluralize 参数为{String} single, [double,triple]，字符串复数化。如果接收的是一个参数，那复数形式就是在字符串末尾直接加一个“s”。如果接收多个参数，则会被当成数组处理，字符串会添加对应数组下标的值。如果字符串的个数多于参数个数，多出部分会都添加最后一个参数的值。例如：
<p v-for="c in count">{{ c | pluralize 'item' }} {{ c | pluralize 'st' 'nd' 'rd' 'th' }}</p>

⑥json 参数为{Number}[indent]空格缩进数，与JSON.stringify()作用相同，将json对象数据输出成符合json格式的字符串。

⑦debounce 传入值必须是函数，参数可选，为 {Number}[wait]，即延时时长。作用是当调用函数n 毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。例如： <input v-on:keyup ="onKeyup | debounce 500"> // input元素上监听了keyup事件，并且延迟 500ms触发。

⑧limitBy 传入值必须是数组，参数为 {Number}limit，{Number}[offset], limit为显示个数，offset为开始显示数组下标。例如： <div v-for="item in items | limitBy 10"></div>// items为数组，且只显示数组中的前十个元素。

⑨filterBy 传入值必须是数组，参数为{String | Function}targetStringOrFunction，即需要匹配的字符串或函数（通过函数返回值为true或false来判断匹配结果）；“in” （可选分隔符）；{String}[… searchKeys]，为检索的属性区域。示例:

<p v-for="name in names | ﬁlterBy '1.0' ">{{name}}</p>// 检索items数组中值包含1.0的元素 <p v-for="item in items | ﬁlterBy '1.0' in 'name'">{{ item | json}}</p> // 检索 items数组中元素属性name值为1.0的元素输出。检索区域也可以为数组，即in [name, version]，在多个属性中进行检索。

Vue.js 内置了10个过滤器，下面简单介绍它们的功能和用法。相关推荐

Vue.js 内置指令
回顾一下第2.2节,我们己经介绍过指令(Directive)的概念了,Vue.js的指令是带有特殊前缀v-的HTML特性,它绑定一个表达式,并将一些特性应用到DOM上. 其实我们已经用到过很多Vue内 ...
vue.js (内置数组筛选器)
数组过滤器 Vue有两个内置的过滤器来过滤或者排序数据,分别是: filterBy 和 orderBy . filterBy 语法: filterBy searchKey [in dataKey... ...
前端：JS/23/JS内置对象（String对象，Array对象，Date对象，Boolean对象，Number对象，Math对象），实例：求圆的面积，求直角三角形
JS内置对象 1,String对象字符串对象,提供了对字符串进行操作的属性和方法 2,Array对象数组对象,提供了数组操作方面的属性和方法 3,Date对象日期时间对象,可以获取系统的日期时间 ...
js内置对象【学习笔记】
今天系统的学了一下javascript的内置对象.mark相关的知识点: 首先,什么是js的内置对象,它包括了些什么内容?(以下内容转自网上资源的整合) (W3shool JS手册地址:http:// ...
window内置对象和js内置对象与方法
window内置对象一.navigator 代表着浏览器本身的信息: 代码名:navigator.appCodeName 浏览器语言:navigator.browserLanguage 操作系统 ...
JS内置对象及其用法总结
首先JS对象分为3种:自定义.内置.浏览器.今天就总结一下JS内置对象以及一些用法. 一.Math对象:不是一个构造函数,不需要new,直接调用即可. 1.Math.max(x,y);返回x,y的最大 ...
JS内置对象操作方法整理
JS对象操作方法整理文章目录 JS对象操作方法整理数组 ES5 ES6 字符串 String 日期 Date() 数字 Number 算数 Math 数组 ES5 concat() 连接两个或更多 ...
JS内置引用类型/内置对象
JS内置引用类型/内置对象概述对象在 JavaScript 中被称为引用类型的值/实例,在 ECMAScript 中,引用类型是一种数据结构, 用于将数据和功能组织在一起.它也常被称为类,但这种称 ...
js内置对象常用方法
js内置对象常用方法 JS内置对象: ● String对象:处理所有的字符串操作 ● Math对象:处理所有的数学运算 ● Date对象:处理日期和时间的存储.转化和表达 ● Array对象:提供一个 ...

Vue.js 内置了10个过滤器，下面简单介绍它们的功能和用法。

Vue.js 内置了10个过滤器，下面简单介绍它们的功能和用法。相关推荐

最新文章

热门文章