文章目录
Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些功能,这些过滤器称之为系统过滤器,Vue也提供了一个接口用来提供程序员定义属于自己的特殊逻辑,Vue称之为自定义过滤器。
- 注意:系统过滤器是Vue1.0中存在的,在Vue2.0中已经删除了
capitalize
-
作用:将字符串的首写变成大写
-
例如:
{{ msg | capitalize }}
‘abc’ => ‘Abc’
uppercase
-
示例:
{{ msg | uppercase }}
‘abc’ => ‘ABC’
lowercase
-
示例
{{ msg | lowercase }}
‘ABC’ => ‘abc’
currency
-
参数
{String}[货币符号]-默认值:‘$’
- 1.0.22+
{Number}[小数位]-默认值:2
-
示例:
{{ amount | currency }}
2345 => $12,345.00
使用其它符号:
{{ amount | currency '£' }}
12345 => £12,345.00
一些货币使用3或4位小数,而一些货币不会,例如日元(¥))、越南盾(₫):
{{ amount | currency '₫' 0 }}
12345 => ₫12,345
pluralize
- 参数:
{String} single, [double, triple, ...]
- 用法:
如果只有一个参数,复数形式只是简单地在末尾添加一个“s”。如果有多个参数,参数被当做一个字符串数组,对应一个、两个、三个…复数词。如果值的个数多于参数的个数,多出的使用最后一个参数。
示例:
{{count}} {{count | pluralize 'item'}}
1 => ‘1 item’
2 => ‘2 items’
{{date}}{{date | pluralize 'st' 'nd' 'rd' 'th'}}
结果:
1 => ‘1st’
2 => ‘2nd’
3 => ‘3rd’
4 => ‘4th’
5 => ‘5th’
json
- 参数:
{Number} [indent] - 默认: 2
- 用法:
输出经JSON.stringify()
处理后的结果,而不是输出toString()
的结果(如 [object Object]
)。
- 示例:
以四个空格的缩进打印一个对象:
<pre>{{ nestedObject | json 4 }}</pre>
debounce
- 限制:指令的值需是函数,如
v-on
- 参数:{Number} [wait] - default: 300
- 用法:
包装处理器,让它延迟执行x
ms,默认延迟300ms。包装后的处理器在调用之后至少将延迟x
ms,如果在延迟结束前再次调用,延迟时长重置为x
ms。
-
例如:
<input @keyup=“onKeyup | debounce 500”>
limitBy
-
限制:指令的值需是数组,如
v-for
-
参数:
{Number} limit
{Number} [offset]
-
用法:
限制数组为开始N个元素,N由第一个参数指定。第二个参数是可选的,指定开始的偏移量。
<!-- 只显示开始10个元素 -->
<div v-for="item in items | limitBy 10"></div>
<!-- 显示第5-15元素 -->
<div v-for="item in items | limitBy 10 5"></div>
filterBy
-
限制:指令的值需是数组,如
v-for
-
参数:
{String | Function} targetStringOrFunction
"in" (optional delimiter)
{String} [...searchKeys]
-
用法:
返回过滤后的数组。第一个参数可以是字符串或函数。如果第一个参数是字符串,则在每个数组元素中搜索它:
<div v-for="item in items | filterBy 'hello'">
在上例中,只显示包含字符串hello
的元素。如果item是一个对象,过滤器将递归地在它所有属性中搜索。为了缩小搜索范围,可以指定一个搜索字段:
<div v-for="user in users | filterBy 'Jack' in 'name'">
在上例中,过滤对象只在用户对象的name
属性中搜索Jack
。为了更好的性能,最好始终限制搜索范围。
上例中使用静态参数,当然可以使用动态参数作为搜索目标或搜索字段。配合v-model
我们可以轻松实现输入提示效果:
<div id="filter-by-example">
<input v-model="name">
<ul>
<li v-for="user in users | filterBy name in 'name'">
{{ user.name }}
</li>
</ul>
</div>
new Vue({
el: '#filter-by-example',
data: {
name: '',
users: [
{ name: 'Bruce' },
{ name: 'Chuck' },
{ name: 'Jackie' }
]
}
})
- 其它示例:
多键值搜索:
<li v-for="user in users | filterBy searchText in 'name' 'phone'"></li>
使用一个动态数组进行多键值搜索:
<!-- fields = ['fieldA', 'fieldB'] -->
<div v-for="user in users | filterBy searchText in fields">
使用一个用户自定义的过滤器函数:
<div v-for="user in users | filterBy myCustomFilterFunction">
orderBy
-
限制:指令的值需是数组,如
v-for
-
参数:
{String | Array<String> | Function} ...sortKeys
- {String} [order] - 默认值: 1
-
用法:
返回排序后的数组。你可以传入多个键名。也可以传入一个数组,此数组包含排序的键名。如果你想使用自己的排序策略,可以传入一个函数。可选参数order
决定结果升序(order >= 0
)或降序(order < 0)。
对于原始类型数组,可以忽略sortKey
,只提供排序,例如orderBy 1
。
- 示例:
按名字排序用户:
<ul>
<li v-for="user in users | orderBy 'name'">
{{ user.name }}
</li>
</ul>
降序:
<ul>
<li v-for="user in users | orderBy 'name' -1">
{{ user.name }}
</li>
</ul>
原始值排序:
<ul>
<li v-for="n in numbers | orderBy true">
{{ n }}
</li>
</ul>
动态排序:
<div id="orderby-example">
<button @click="order = order * -1">Reverse Sort Order</button>
<ul>
<li v-for="user in users | orderBy 'name' order">
{{ user.name }}
</li>
</ul>
</div>
new Vue({
el: '#orderby-example',
data: {
order: 1,
users: [{ name: 'Bruce' }, { name: 'Chuck' }, { name: 'Jackie' }]
}
})
使用两个键排序:
<ul>
<li v-for="user in users | orderBy 'lastName' 'firstName'">
{{ user.lastName }} {{ user.firstName }}
</li>
</ul>
使用函数排序:
<div id="orderby-compare-example" class="demo">
<button @click="order = order * -1">Reverse Sort Order</button>
<ul>
<li v-for="user in users | orderBy ageByTen order">
{{ user.name }} - {{ user.age }}
</li>
</ul>
</div>
new Vue({
el: '#orderby-compare-example',
data: {
order: 1,
users: [
{
name: 'Jackie',
age: 62
},
{
name: 'Chuck',
age: 76
},
{
name: 'Bruce',
age: 61
}
]
},
methods: {
ageByTen: function (a, b) {
return Math.floor(a.age / 10) - Math.floor(b.age / 10)
}
}
})
举例
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<div id="app">
原始数组对象:<br>
{{list}}<br>
<hr>
转换成json后的字符串数组:<br>
{{list | json}}<br>
<hr>
将其转换成大写:<br>
{{list | json | uppercase}}<br>
<hr>
搜索其中的“Hello”字符串:<br>
<li v-for="item in list | filterBy 'Hello' ">{{item.hello}}</li>
</div>
</body>
<!--1、导入Vue的js文件 -->
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
var vm = new Vue({
el:'#app'
,data:{
list:[
{hello:'Hello'}
,{world:'World'}
]
}
});
</script>
</html>
结果
由于系统过滤器的用法我在上面的文档中已经写得很清楚了,所以说这里就不用再进行分析了。