最后我们还需要将这个列表用字母进行排序。我们可以在 filterBy 过滤器的基础上，链式调用orderBy 过滤器。
<ul>
<li v-for="product in products
| filterBy 'electronics' in 'category'
| orderBy 'name' "
>
{{ product.name | capitalize }} - {{ product.price | currency }}
</li>
</ul>orderBy 的排序方式默认是升序，如果想要降序，只需要加一个小于0的参数：
<li v-for="product in products
| filterBy 'electronics' in 'category'
| orderBy 'name' -1 "
>
下面看看vue自带过滤器有哪些，并附带小示例。最后记得看看如果自定义过滤器哦！
vue自带的过滤器
capitalize(首字母大写)
<div class="test">
{{message | capitalize}}
</div><script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
message: "javan"
}
})
</script>
上面代码输出:Javan
uppercase(全部大写)
// 初始message:abc{{message | uppercase}}
// 上面代码输出:ABC
lowercase(全部小写)
// 初始message:ABC{{message | lowercase}}
// 上面代码输出:abc
currency(输出金钱以及小数点)
<div class="test">
{{message | currency}} // 输出$520.13
{{message | currency '¥' "2"}} //输出 $520.13
</div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
message: "520.1314"
}
})
</script>第一个参数 {String} [货币符号] – 默认值: ‘$’
第二个参数 {Number} [小数位] – 默认值: 2
pluralize(变复数)
如果只有一个参数，复数形式只是简单地在末尾添加一个 “s”。如果有多个参数，参数被当作一个字符串数组，对应一个、两个、三个…复数词。如果值的个数多于参数的个数，多出的使用最后一个参数。
<div class="test">
{{message}} {{message | pluralize 'item'}} 输出: 1 item
<ul v-for="item in lili">
<li>
{{item}} {{item | pluralize 'item'}}
输出: 1 item 2 items 3 items
</li>
</ul> <ul v-for="item in lili">
<li>
{{item}} {{item | pluralize 'st' 'rd'}}
输出: 1 st 2 rd 3 rd
</li>
</ul>
