Vue.js 过滤器

需要注意的是，Vue.js 2.0 中已经去除了内置的过滤器

Vue.js 过滤器使用

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由管道符 | 指示

Vue.js 内置的 10 个过滤器

1 . capitalize 字符串首字符转化成大写
2. uppercase 字符串转化成大写
3. lowercase 字符串转化成小写
4. currency 参数为{String}[货币符号] ,{Number} [小数位]，将数字转化成货币符号，并且会自动添加数字分节号

{{ amount | currency ' ¥' 2 }}  // -> 若 amount 值为 10000，则输出¥10,000.00

5 . pluralize 参数为 {String} single, [double, triple]，字符串复数化。
如果接收的是一个参数，那复数形式就是在字符串末尾直接加一个“s”。如果接收多个参数，则会被当成数组处理，字符串会添加对应数组下标的值。如果字符串的个数多于参数个数，多出部分会都添加最后一个参数的值。

 <p v-for="c in count">{{ c | pluralize 'item' }}  {{ c | pluralize 'st' 'nd' 'rd' 'th' }}</p>
 输出： 1 item 1st / 2 items 2nd / 3itrms 3rd / 4 items 4th

6 . json 参数为 {Number}[indent] 空格缩进数，与 JSON.stringify() 作用相同，将 json 对象数据输出成符合 json 格式的字符串。
7. debounce 传入值必须是函数，参数可选，为 {Number}[wait]，即延时时长。作用是当调用函数 n 毫秒后，才会执行该动作，若在这 n 毫秒内又调用此动作则将重新计算执行时间。

<input v-on:keyup ="onKeyup | debounce 500"> // input元素上监听了keyup事件， 并且延迟 500ms 触发

8 . limitBy 传入值必须是数组，参数为 {Number}limit，{Number}[offset], limit 为显示个数，offset 为开始显示数组下标。

<div v-for="item in items | limitBy 10"></div> // items 为数组，且只显示数 组中的前十个元素

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

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

<p v-for="item in items | filterBy customFilter">{{ item | json}}</p> // 使用自定义的过滤函数，函数可以在选项 methods 中定义
methods : {
  customFilter : function(item) {
   if(item.name) return true // 检索所有元素中包含 name 属性的元素  }
}

10 . orderBy 传入值必须是数组，参数为 {String|Array|Function}sortKeys，即指定排序策略。这里可以使用单个键名，也可以传入包含多个排序键名的数组。也可以像 Array.Sort() 那样传入自己的排序策略函数。第二个参数为可选参数 {String}[order]，即选择升序或降序， order>=0 为升序，order<0 为降序。
下面以三种不同的参数例子来说明具体的用法:

单个键名:<p v-for="item in items | orderBy 'name' -1">{{item.name}}</p> // items 数组中以键名 name 进行降序排列
多个键名:<p v-for="item in items | orderBy [name,version] ">{{item.name}}</p> // 使用 items 里的两个键名进行排序
自定义排序函数 : <p v-for="item in items | orderBy customOrder">{{item.name}}
</p>
methods: {
 customOrder: function (a, b) {
  return parseFloat(a.version) > parseFloat(b.version) // 对比item中 version 的值的大小进行排序
 } }

Vue.js 过滤器使用

Vue.js 内置的 10 个过滤器

猜你喜欢