vue-filter

A plugin for Vue.js. Which include many useful custom filters can enhance vue filter system.

npm install vue-filter

var Vue = require('Vue');
var VueFilter = require('vue-filter');
Vue.use(VueFilter);

require(['vue','vue-filter'],function(Vue,VueFilter){
	Vue.use(VueFilter);
});

you can include it directly with a <script> tag. It will install itself automatically.

<script src="vue.js"></script>
<script src="vue-filter.js"></script>

It's very easy to use.

Example:

• append postfix for a string:

<img src={{ 'sky' | append '.jpg' }} />
<!-- get -->
<img src='sky.jpg' />

• get first element in an array or first charactor in a string:

<p>{{ ['a','b','c'] | first }}</p>
<!-- get -->
<p>a</p>

See filter list below for more filters

• first
• last
• join
• size
• at
• reverse
• concat
• map
• random
• range
• contains

• abs
• acos
• asin
• atan
• atan2
• ceil
• cos
• exp
• floor
• log
• pow
• round
• sin
• sqrt
• tan
• sum
• mean
• min
• max
• plus
• minis
• multiply
• divide
• mod

• append
• prepend
• remove
• camelcase
• truncate
• split
• trim
• test
• leftPad
• rightPad
• repeat

• date
• defaults

see Document below to learn how to use those filters

Returns the first element of an array,or first charactor of a string.

{{ ['a','b','c'] | first }} => 'a'
{{ 'hello' | first }} => 'h'

Returns the last element of an array,or last charactor of a string.

{{ ['a','b','c'] | last }} => 'c'
{{ 'hello' | last }} => 'o'

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'

Returns the size of a string or an array.

{{ ['a','b','c'] | size }} => 3
{{ 'hello' | size }} => 5

Returns the item at the specified index location in an array or a string.

{{ ['a','b','c'] | at 1 }} => 'b'
{{ 'hello' | at 1 }} => 'e'

reverse an array or a string

{{ 'abc' | reverse }} => 'cba'
{{ [1,2,3] | reverse }} => [3,2,1]

Concatenates an array into another one.

{{ [1,2,3] | concat [4,5,6] }} => [1,2,3,4,5,6]

returns a new collection of the results of each expression execution.

new Vue({
  ...
  methods:{
    increase:function(val){return val+1;}
  }
});

{{ [1,2,3] | map increase }} => [2,3,4]

get a random value from a collection

{{ [1,2,3,4] | random }} => 1 or 2 or 3 or 4

Return a new collection from a given length

{{ [] | range 4 }} => [0,1,2,3]

Checks if given expression or value is present in the collection

{{ [2,3,4] | contains 3 }} => true;

abs,acos,asin,atan,atan2,ceil,cos,exp,floor,log,pow,round,sin,sqrt,tan

Notice: random filter use to get a random value from a collection

{{ -1.2 | abs }}  => 1.2
{{ 1 | acos }}  => 0
{{ 1.3 | ceil }} => 2
{{ 3 | pow 2 }} => 9  i.e: Math.pow(3,2)

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

return mean value of a array

{{ [1,2,3,4] | mean }} => 2.5

return minimum value in an array.It will compare two item by a certain key if key provide.

{{ [13,22,3,24 ] | min }} => 3
{{ list | min 'age' }} => {name:'ron',age:12}
list:[
	{name:'james',age:24},
	{name:'ron',age:12}
]

return maximum value in an array.It will compare two item by a certain key if key provide.

Adds a number to an output.

{{ 10 | plus 2 }} => 12

Subtracts a number from an output.

{{ 12 | minus 2 }} => 10

Multiplies an output by a number.

{{ 10 | multiply 2 }} => 20

Divides an output by a number

{{ 10 | divide 4 }} => 2.5

Divides an output by a number and returns the remainder.

{{ 10 | mod 3 }} => 1

Appends characters to a string.

{{ 'sky' | append '.jpg' }} => 'sky.jpg'

Prepends characters to a string.

{{ 'world' | prepend 'hello ' }} => 'hello world'

Removes all occurrences of a substring from a string.

{{ 'Hello JavaScript' | remove 'Hello' }} => ' JavaScript'

Converts a string into CamelCase.

{{ some_else | camelcase }} => SomeElse
{{ some-else | camelcase }} => SomeElse

truncate text to a specified length.

{{ 'this is a big city!' | truncate 10 '...' }} => this is...

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]

Strips tabs, spaces, and newlines (all whitespace) from the left or right or both side of a string.which depends on second argument. if it is 'r' will only trim right side,if it is 'l' will only trim left side otherwise trim both left and right side.

{{ '   some spaces   ' | trim }} => 'some spaces'
{{ '   some spaces   ' | trim 'r' }} => '   some spaces'
{{ '   some spaces   ' | trim 'l' }} => 'some spaces   '

test if a string match a pattern

{{ "http://vuejs.org" | test /^http/ }} => true

pad a string on left

{{ 'abc' | leftPad 5 '*' }} => '**abc'

pad a string on right

{{ 'abc' | rightPad 5 '*' }} => 'abc**'

repeat a string n times

{{ 'abc' | repeat 3 }} => 'abcabcabc'
{{ 'abc' | repeat '3' }} => 'abcabcabc'
{{ 'abc' | repeat 0 }} => ''
{{ 'abc' | repeat }} => ''

Converts a timestamp into another date format.

{{ Date.now() | date '%T' }}  => '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:

Sets a default value for any variable with no assigned value.

The default value is returned if the variable resolves to null ,undefined or an empty string ''.A string containing whitespace characters and a number has value 0 will not resolve to the default value.

{{ customer.name | defaults "customer" }}

<!--if customer.name is null or empty,will use "customer" instead-->

MIT