vue-filter-test-new
v0.0.1
Published
A collection of Vue.js filter.
Downloads
7
Readme
vue-filter
A collection of Vue.js filter
Notice: Normally, you will only use few filters in your project, so you don't need to import this library entirely. Consider use a library like Lodash and write the filter you need by yourself.
How to use ?
step 1. Install vue-filter
You can install it from npm:
npm install vue-filter --save
or copy the file at here.
If you include the file with <script>
tag, the filters will be installed automatically. But please make sure put the vue-filter
script behind Vue.
<script src="vue.min.js"></script>
<script src="vue-filter.min.js"></script>
If you use a bundle tools like webpack, you need install the filters manually.
As from Vue 2.0 you have to install the extension using the Vue.use()
sytax.
import VueFilter from 'vue-filter';
import Vue from 'vue';
// Vue.install(vueFilter); // Vue V1
Vue.use(VueFilter); // Vue V2
step 2. use filter
data: {
list: [{
name: 'James, LeBron',
score: 38
},{
name: 'Irving, Kyrie',
score: 43
},{
name: 'Jefferson, Richard',
score: 11
}]
}
// get sum of score.
{{ list | map(player => player.score) | sum }} => 92
// top score.
{{ list | max(player => player.score) | get('score') }} => 43
Filter List
Click the filter to see how to use it.
Collection Filters
- map
- at
- reduce
- find
- filter
- reject
- every
- some
- contains
- pluck
- max
- min
- sortBy
- groupBy
- indexBy
- countBy
- shuffle
- sample
- toArray
- size
Array Filters
String Filters
- append
- prepend
- camelcase
- replace
- substring
- substr
- truncate
- split
- trim
- trimLeft
- trimRight
- test
- leftPad
- rightPad
- repeat
- lowercase
- uppercase
- nl2br
Object Filters
Math Filters
- abs,acos,asin,atan,atan2,ceil,cos,exp,floor,log,pow,round,sin,sqrt,tan
- sum
- mean
- plus
- minus
- multiply
- divide
- mod
- toFixed
- toPrecision
Other Filters
Filter Usage
Collection Filters
map
Produces a new array of values by mapping each value in list through a transformation function (iteratee). The iteratee is passed three arguments: the value
, then the index
(or key
) of the iteration, and finally a reference to the entire list
.
{{ [1,2,3] | map(function (n){ return n * 2; }) }} => [2,4,6]
{{ [1,2,3] | map(function (num){ return num * 3; }) }} => [3,6,9]
{{ {"one":1,"two":2,"three":3} | map(function (num, key){ return num * 3; }) }} => [3,6,9]
at
Returns the item at the specified index location in an array or a string.
{{ ['a','b','c'] | at(1) }} => 'b'
{{ 'hello' | at(1) }} => 'e'
reduce
Also known as inject and foldl, reduce boils down a list of values into a single value. Memo is the initial state of the reduction, and each successive step of it should be returned by iteratee. The iteratee is passed four arguments: the memo
, then the value
and index
(or key) of the iteration, and finally a reference to the entire list
.
If no memo is passed to the initial invocation of reduce, the iteratee is not invoked on the first element of the list. The first element is instead passed as the memo in the invocation of the iteratee on the next element in the list.
{{ [1,2,3] | reduce(function (memo, num){ return memo + num; }, 0) }} => 6
find
Looks through each value in the list, returning the first one that passes a truth test (predicate), or undefined
if no value passes the test. The function returns as soon as it finds an acceptable element, and doesn't traverse the entire list.
{{ [1,2,3,4,5,6] | find(function (num){ return num % 2 == 0; }) }} =>
filter
Looks through each value in the list, returning an array of all the values that pass a truth test (predicate).
{{ [1,2,3,4,5,6] | filter(function (num){ return num % 2 == 0; }) }} => [2,4,6]
reject
Returns the values in list without the elements that the truth test (predicate) passes. The opposite of filter.
{{ [1,2,3,4,5,6] | reject(function (num){ return num % 2 == 0; }) }} => [1,3,5]
every
Returns true if all of the values in the list pass the predicate truth test. Short-circuits and stops traversing the list if a false element is found.
{{ [2,4,5] | every(function (num) { return num % 2 == 0; }) }} => false
some
Returns true if any of the values in the list pass the predicate truth test. Short-circuits and stops traversing the list if a true element is found.
{{ [null,0,"yes",false] | some(val => !val ) }} => true
contains
Returns true if the value is present in the list. Uses indexOf internally, if list is an Array. Use fromIndex to start your search at a given index.
{{ [1,2,3] | contains(3) }} => true
pluck
A convenient version of what is perhaps the most common use-case for map: extracting a list of property values.
{{ [{
"name": "moe",
"age": 40
}, {
"name": "larry",
"age": 50
}, {
"name": "curly",
"age": 60
}] | pluck("name") }} => ["moe","larry","curly"]
max
Returns the maximum value in list. If an iteratee function is provided, it will be used on each value to generate the criterion by which the value is ranked. -Infinity is returned if list is empty, so an isEmpty guard may be required. Non-numerical values in list will be ignored.
{{ [{
"name": "moe",
"age": 40
}, {
"name": "larry",
"age": 50
}, {
"name": "curly",
"age": 60
}] | max(function (stooge){ return stooge.age; }) }} => {"name":"curly","age":60}
min
Returns the minimum value in list. If an iteratee function is provided, it will be used on each value to generate the criterion by which the value is ranked. Infinity is returned if list is empty, so an isEmpty guard may be required. Non-numerical values in list will be ignored.
{{ [10,5,100,2,1000] | min }} => 2
sortBy
Returns a (stably) sorted copy of list, ranked in ascending order by the results of running each value through iteratee. iteratee may also be the string name of the property to sort by (eg. length
).
{{ [1,2,3,4,5,6] | sortBy(function (num){ return Math.sin(num); }) }} => [5,4,6,3,1,2]
{{ [{
"name": "moe",
"age": 40
}, {
"name": "larry",
"age": 50
}, {
"name": "curly",
"age": 60
}] | sortBy("name") }}
=>
[{
"name": "curly",
"age": 60
}, {
"name": "larry",
"age": 50
}, {
"name": "moe",
"age": 40
}]
groupBy
Splits a collection into sets, grouped by the result of running each value through iteratee. If iteratee is a string instead of a function, groups by the property named by iteratee on each of the values.
{{ [1.3, 2.1, 2.4] | groupBy(function (num){ return Math.floor(num); }) }} => {"1":[1.3],"2":[2.1,2.4]}
{{ ["one","two","three"] | groupBy("length") }} => {"3":["one","two"],"5":["three"]}
indexBy
Given a list, and an iteratee function that returns a key for each element in the list (or a property name), returns an object with an index of each item. Just like groupBy, but for when you know your keys are unique.
{{ [{
"name": "moe",
"age": 40
}, {
"name": "larry",
"age": 50
}, {
"name": "curly",
"age": 60
}] | indexBy("age") }} =>
{
"40": {
"name": "moe",
"age": 40
},
"50": {
"name": "larry",
"age": 50
},
"60": {
"name": "curly",
"age": 60
}
}
countBy
Sorts a list into groups and returns a count for the number of objects in each group. Similar to groupBy
, but instead of returning a list of values, returns a count for the number of values in that group.
{{ [1,2,3,4,5] | countBy(function (num) {
return num % 2 == 0 ? 'even': 'odd';
}) }} => {"odd":3,"even":2}
shuffle
Returns a shuffled copy of the list, using a version of the Fisher-Yates shuffle.
{{ [1,2,3,4,5,6] | shuffle }} => [5,2,3,6,1,4]
sample
Produce a random sample from the list. Pass a number to return n random elements from the list. Otherwise a single random item will be returned.
{{ [1,2,3,4,5,6] | sample }} => one element
{{ [1,2,3,4,5,6] | sample(3) }} => there elements
toArray
Creates a real Array from the list (anything that can be iterated over). Useful for transmuting the arguments object.
{{ {"0":1,"1":2,"2":3,"3":4} | toArray }} => [1,2,3,4]
size
Return the number of values in the list.
{{ {"one":1,"two":2,"three":3} | size }} => 3
Array Functions
Note: All array functions will also work on the arguments object. However, Underscore functions are not designed to work on "sparse" arrays.
Array Filters
first
Returns the first element of an array. Passing n will return the first n elements of the array.
{{ [5,4,3,2,1] | first }} => 5
{{ [1,2] | first(0, [[1,2],[3,4]]) }} => 1
{{ [3,4] | first(1, [[1,2],[3,4]]) }} => 3
initial
Returns everything but the last entry of the array. Especially useful on the arguments object. Pass n to exclude the last n elements from the result.
{{ [5,4,3,2,1] | initial }} => [5,4,3,2]
last
Returns the last element of an array. Passing n will return the last n elements of the array.
{{ [5,4,3,2,1] | last }} => 1
rest
Returns the rest of the elements in an array. Pass an index to return the values of the array from that index onward.
{{ [5,4,3,2,1] | rest }} => [4,3,2,1]
flatten
Flattens a nested array (the nesting can be to any depth). If you pass shallow, the array will only be flattened a single level.
{{ [1,[2],[3,[[4]]]] | flatten }} => [1,2,3,4]
{{ [1,[2],[3,[[4]]]] | flatten(true) }} => [1,2,3,[[4]]]
without
Returns a copy of the array with all instances of the values removed.
{{ [1,2,1,0,3,1,4] | without(0, 1) }} => [2,3,4]
union
Computes the union of the passed-in arrays: the list of unique items, in order, that are present in one or more of the arrays.
{{ [1,2,3] | union([101,2,1,10], [2,1]) }} => [1,2,3,101,10]
intersection
Computes the list of values that are the intersection of all the arrays. Each value in the result is present in each of the arrays.
{{ [1,2,3] | intersection([101,2,1,10], [2,1]) }} => [1,2]
difference
Similar to without, but returns the values from array that are not present in the other arrays.
{{ [1,2,3,4,5] | difference([5,2,10]) }} => [1,3,4]
uniq
Produces a duplicate-free version of the array, using === to test object equality. In particular only the first occurence of each value is kept. If you know in advance that the array is sorted, passing true for isSorted will run a much faster algorithm. If you want to compute unique items based on a transformation, pass an iteratee function.
{{ [1,2,1,4,1,3] | uniq }} => [1,2,4,3]
join
Joins the elements of an array with the character passed as the parameter. The result is a single string.
{{ ['a','b','c'] | join('-') }} => 'a-b-c'
reverse
Reverse an array or a string.
{{ 'abc' | reverse }} => 'cba'
{{ [1,2,3] | reverse }} => [3,2,1]
concat
Concatenates an array into another one.
{{ [1,2,3] | concat([4,5,6]) }} => [1,2,3,4,5,6]
String Filters
replace
{{ 'ab-cd' | replace('-', '') }} => 'abcd'
substr
{{ 'javascript' | substr(0, 4) }} => 'java'
substring
{{ 'javascript' | substring(0,2) }} => 'ja'
append
Appends characters to a string.
{{ 'sky' | append('.jpg') }} => 'sky.jpg'
prepend
Prepends characters to a string.
{{ 'world' | prepend('hello ') }} => 'hello world'
camelcase
Converts a string into CamelCase.
{{ "some_else" | camelcase }} => "SomeElse"
{{ "some-else" | camelcase }} => "SomeElse"
truncate
Truncate text to a specified length.
{{ 'this is a big city!' | truncate(10, '...') }} => 'this is a ...'
split
The split filter takes on a substring as a parameter.The substring is used as a delimiter to divide a string into an array.
{{ 'a-b-c-d' | split('-') }} => [a,b,c,d]
trim
Strips tabs, spaces, and newlines (all whitespace) from the left or right or both side of a string.which depends on second argument.
{{ ' some spaces ' | trim }} => 'some spaces'
trimLeft
{{ ' some spaces ' | trimLeft }} => 'some spaces '
trimRight
{{ ' some spaces ' | trimRight }} => ' some spaces'
test
Test if a string match a pattern.
{{ "http://vuejs.org" | test("^http") }} => true
// second param is regExp flag
{{ "VUE" | test("vue", "i") }} => true
leftPad
Pad a string on left.
{{ 'abc' | leftPad(5, '*') }} => '**abc'
rightPad
Pad a string on right.
{{ 'abc' | rightPad(5, '*') }} => 'abc**'
repeat
Repeat a string n times.
{{ 'abc' | repeat(3) }} => 'abcabcabc'
{{ 'abc' | repeat('3') }} => 'abcabcabc'
{{ 'abc' | repeat(0) }} => ''
{{ 'abc' | repeat }} => ''
lowercase
Lowercase a string.
{{ 'Vue' | lowercase }} => 'vue'
uppercase
Uppercase a string.
{{ 'Vue' | uppercase }} => 'VUE'
nl2br
Replace new lines by <br/>
tags. This returns a string conainting html tag so in order
to prevent vue from escaping the tags special rendering is needed: {{{ triple handlebars }}}
in Vue 1.0, v-html
with direct filter function in Vue 2.0
// Vue 1.0
<p> {{{ text | nl2br }}} </p>
// Vue 2.0
<p v-html="$options.filters.nl2br(text)"></p>
Object Filters
keys
Retrieve all the names of the object's own enumerable properties.
{{ {"one":1,"two":2,"three":3} | keys }} => ["one","two","three"]
allKeys
Retrieve all the names of object's own and inherited properties.
{{ {"name":"Moe"} | allKeys }} => ["name","silly"]
values
Return all of the values of the object's own properties.
{{ {"one":1,"two":2,"three":3} | values }} => [1,2,3]
pairs
Convert an object into a list of [key, value]
pairs. The opposite of object.
{{ {"one":1,"two":2,"three":3} | pairs }} => [["one",1],["two",2],["three",3]]
invert
Returns a copy of the object where the keys have become the values and the values the keys. For this to work, all of your object's values should be unique and string serializable.
{{ {
"Moe": "Moses",
"Larry": "Louis",
"Curly": "Jerome"
} | invert }} =>
{
"Moses": "Moe",
"Louis": "Larry",
"Jerome": "Curly"
}
extend
Shallowly copy all of the properties in the source objects over to the destination object, and return the destination object. Any nested objects or arrays will be copied by reference, not duplicated. It's in-order, so the last source will override properties of the same name in previous arguments.
{{ {"name":"moe"} | extend({"age":50}) }} => {"name":"moe","age":50}
pick
Return a copy of the object, filtered to only have values for the whitelisted keys (or array of valid keys). Alternatively accepts a predicate indicating which keys to pick.
{{ {"name":"moe","age":50,"userid":"moe1"} | pick("name", "age") }} => {"name":"moe","age":50}
{{ {"name":"moe","age":50,"userid":"moe1"} | pick(function (value, key, object) {
return typeof value === 'number'
}) }} => {"age":50}
omit
Return a copy of the object, filtered to omit the blacklisted keys (or array of keys). Alternatively accepts a predicate indicating which keys to omit.
{{ {"name":"moe","age":50,"userid":"moe1"} | omit("userid") }} => {"name":"moe","age":50}
{{ {"name":"moe","age":50,"userid":"moe1"} | omit(function (value, key, object) {
return typeof value === 'number'
}) }} => {"name":"moe","userid":"moe1"}
defaults
Returns object after filling in its undefined
properties with the first value present in the following list of defaults objects.
{{ {"flavor":"chocolate"} | defaults({"flavor":"vanilla","sprinkles":"lots"}) }} => {"flavor":"chocolate","sprinkles":"lots"}
has
Does the object contain the given key? Identical to object.hasOwnProperty(key)
, but uses a safe reference to the hasOwnProperty
function, in case it's been overridden accidentally.
{{ {"a":1,"b":2,"c":3} | has("b") }} => true
Math Filters
Math method function
abs
,acos
,asin
,atan
,atan2
,ceil
,cos
,exp
,floor
,log
,pow
,round
,sin
,sqrt
,tan
{{ -1.2 | abs }} => 1.2
{{ 1 | acos }} => 0
{{ 1.3 | ceil }} => 2
{{ 3 | pow(2) }} => 9 i.e: Math.pow(3,2)
sum
Get sum of all values in an array.
{{ [1,2,3] | sum }} => 6
you can give an option argument as initial value
{{ [1,2,3] | sum(10) }} = 16
mean
Return mean value of a array.
{{ [1,2,3,4] | mean }} => 2.5
min
Returns the minimum value in list. If an iteratee function is provided, it will be used on each value to generate the criterion by which the value is ranked. Infinity is returned if list is empty, so an isEmpty guard may be required. Non-numerical values in list will be ignored.
{{ [10,5,100,2,1000] | min }} => 2
max
Returns the maximum value in list. If an iteratee function is provided, it will be used on each value to generate the criterion by which the value is ranked. -Infinity is returned if list is empty, so an isEmpty guard may be required. Non-numerical values in list will be ignored.
{{ [{
"name":"moe","age":40
},{
"name":"larry","age":50
},{
"name":"curly","age":60
}] | max(function (stooge){
return stooge.age;
}) }} => {"name":"curly","age":60}
plus
Adds a number to an output.
{{ 10 | plus(2) }} => 12
minus
Subtracts a number from an output.
{{ 12 | minus(2) }} => 10
multiply
Multiplies an output by a number.
{{ 10 | multiply(2) }} => 20
divide
Divides an output by a number
{{ 10 | divide(4) }} => 2.5
mod
Divides an output by a number and returns the remainder.
{{ 10 | mod(3) }} => 1
toFixed
{{ 3.1415926 | toFixed(4) }} => "3.1415"
toPrecision
{{ 3.1415926 | toPrecision(3) }} => "3.14"
{{ 1 | toPrecision(3) }} => "1.00"
Other Filters
escape
Escapes a string for insertion into HTML, replacing &
, <
, >
, "
, ```, and '
characters.
{{ "Curly, Larry & Moe" | escape }} => "Curly, Larry & Moe"
unescape
The opposite of escape, replaces &
, <
, >
, "
, `
and '
with their unescaped counterparts.
{{ "Curly, Larry & Moe" | unescape }} => "Curly, Larry & Moe"
result
If the value of the named property is a function then invoke it with the object as context; otherwise, return it. If a default value is provided and the property doesn't exist or is undefined then the default will be returned. If defaultValue
is a function its result will be returned.
{{ {"cheese":"crumpets"} | result("cheese") }} => "crumpets"
{{ {"cheese":"crumpets"} | result("meat", "ham") }} => "ham"
date
Converts a timestamp into another date format.
{{ Date.now() | date('%T') }} => current time, format like: '13:34:36'
{{ 'Wed Jan 20 2016 13:34:36 GMT+0800' | date('%T') }} => '13:34:36'
{{ 1453268193752 | date('%Y-%m-%d') }} => '2016-01-20'
{{ new Date | date('%I:%M:%s %p') }} => '1:39:22 PM'
More date parameters are listed below:
Notice: In column 3 of the table below, |(a special symbol) is not | (used to split data and filter), because of the syntax of markdown we can't use | inside a table.
| Param | Explanation | Example |
|:-----:|:-----|:-----|
|%a | Abbreviated weekday. | {{ timestamp|date "%a" }} => "Sat"
|
|%A |Full weekday name. |{{ timestamp|date "%A" }} => "Tuesday"
|
|%b |Abbreviated month name. |{{ timestamp|date "%b" }} => "Jan"
|
|%B |Full month name |{{ timestamp|date "%B" }} => "January"
|
|%c |Preferred local date and time representation |{{ timestamp|date "%c" }} => "Tue Apr 22 11:16:09 2014"
|
|%d |Day of the month, zero-padded (01, 02, 03, etc.). |{{ timestamp|date "%d" }} => "04"
|
|%-d |Day of the month, not zero-padded (1,2,3, etc.). |{{ timestamp|date "%-d" }} => "4"
|
|%D |Formats the date (dd/mm/yy). |{{ timestamp|date "%D" }} => "04/22/14"
|
|%e |Day of the month, blank-padded ( 1, 2, 3, etc.). |{{ timestamp|date "%e" }} => "3"
|
|%F |Returns the date in ISO 8601 format (yyyy-mm-dd). |{{ timestamp|date "%F" }} => "2014-04-22"
|
|%H |Hour of the day, 24-hour clock (00 - 23). |{{ timestamp|date "%H" }} => "15"
|
|%I |Hour of the day, 12-hour clock (1 - 12). |{{ timestamp|date "%I" }} => "7"
|
|%j |Day of the year (001 - 366). |{{ timestamp|date "%j" }} => "245"
|
|%k |Hour of the day, 24-hour clock (1 - 24). |{{ timestamp|date "%k" }} => "14"
|
|%m |Month of the year (01 - 12). |{{ timestamp|date "%m" }} => "04"
|
|%M |Minute of the hour (00 - 59). |{{ timestamp|date "%M" }} => "53"
|
|%p |Meridian indicator (AM/PM). |{{ timestamp|date "%p" }} => "PM"
|
|%r |12-hour time (%I:%M:%S %p) |{{ timestamp|date "%r" }} => "03:20:07 PM"
|
|%R |24-hour time (%H:%M) |{{ timestamp|date "%R" }} => "15:21"
|
|%T |24-hour time (%H:%M:%S) |{{ timestamp|date "%T" }} => "15:22:13"
|
|%U |The number of the week in the current year, starting with the first Sunday as the first day of the first week. |{{ timestamp|date "%U" }} => "16"
|
|%W |The number of the week in the current year, starting with the first Monday as the first day of the first week. |{{ timestamp|date "%W" }} => "16"
|
|%w |Day of the week (0 - 6, with Sunday being 0). |{{ timestamp|date "%w" }} => "2"
|
|%x |Preferred representation for the date alone, no time. (mm/dd/yy). |{{ timestamp|date "%x" }} => "04/22/14"
|
|%X |Preferred representation for the time. (hh:mm:ss). |{{ timestamp|date "%X" }} => "13:17:24"
|
|%y |Year without a century (00.99). |{{ timestamp|date "%y" }} => "14"
|
|%Y |Year with a century. |{{ timestamp|date "%Y" }} => "2014"
|
get
Get a property inside an Object
user = {
contact: {
tel: "187xxxx0001"
}
}
{{ user | get('contact.tel') }} => "187xxxx0001"
License
MIT