安装
npm install vue2-filters
在main.js里引入
import Vue from 'vue'
import Vue2Filters from 'vue2-filters'
Vue.use(Vue2Filters)
要在组件中使用预定义的方法之一(如limitby、filterby、find或orderby),需要将vue2filters.mixin添加到mixin列表:
import Vue2Filters from 'vue2-filters'
export default {
...
mixins: [Vue2Filters.mixin],
...
}
使用:
1、capitalize
{{ msg | capitalize }} // 'abc' => 'Abc'
2、uppercase
{{ msg | uppercase }} // 'abc' => 'ABC'
3、lowercase
{{ msg | lowercase }} // 'ABC' => 'abc'
4、placeholder
{String} [placeholder]
{{ msg | placeholder('Text if msg is missing') }} // '' => 'Text if msg is missing'
5、truncate
{Number} [length] - default: 15
{{ msg | truncate(10) }} // 'lorem ipsum dolor' => 'lorem ipsu...'
6、currency
{String} [symbol] - default: '$'
{Number} [decimalDigits] - default: 2
{Object} [options] - default: {}
{{ amount | currency }} // 12345 => $12,345.00
使用其他符号
{{ amount | currency('£') }} // 12345 => £12,345.00
使用不同的小数位数:
{{ amount | currency('₽', 0) }} // 12345 => ₽12,345
使用不同的千位分隔符:
{{ amount | currency('$', 0, { thousandsSeparator: '.' }) }} // 12345 => $12.345
使用其他十进制分隔符:
{{ amount | currency('$', 2, { decimalSeparator: ',' }) }} // 12345 => $12,345,00
使用符号的右键:
{{ amount | currency('$', 0, { symbolOnLeft: false }) }} // 12345 => 12,345$
在amound和symbol之间添加空格:
{{ amount | currency('$', 0, { spaceBetweenAmountAndSymbol: true }) }} // 12345 => $ 12,34
使用多个选项:
{{ amount | currency('kr', 2, { symbolOnLeft: false, spaceBetweenAmountAndSymbol: true }) }} // 12345 => 12,345.00 kr
7、pluralize
{String} single, [double, triple, ...]
{{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'
8、limitBy
{Array} [items]
{Number} [limit]
{Number} [offset]
<!-- only display first 10 items -->
<div v-for="item in limitBy(items, 10)"></div>
<!-- display items 5 to 15 -->
<div v-for="item in limitBy(items, 10, 5)"></div>
9、filterBy
{Array} [items]
{String} [query]
{String} [searchKey]
<!-- only items that contain the target string "hello" will be displayed -->
<div v-for="item in filterBy(items, 'hello')">
<!-- the filter will only search for "Jack" in the name field of each user object -->
<div v-for="user in filterBy(users, 'Jack', 'name')">
<!-- the filter will only search for "Bonnie" in the name or age fields of each user object -->
<div v-for="user in filterBy(users, 'Bonnie', 'name', 'age')">
10、find
<!-- only the first item that contains the target string "hello" will be displayed -->
<div v-for="item in find(items, 'hello')">
<!-- the filter will only search for "Bonnie" in the name or age fields of each user object and return the first result -->
<div v-for="user in find(users, 'Bonnie', 'name', 'age')">
11、orderBy
按名称对用户排序
<ul>
<li v-for="user in orderBy(users, 'name')">
{{ user.name }}
</li>
</ul>
按降序排列:
<ul>
<li v-for="user in orderBy(users, 'name', -1)">
{{ user.name }}
</li>
</ul>