X
    Categories: Vue.js

Filters in Vue.js

Filters in Vue.js

A Vue.js filter is a function which takes a value and make some process and returns the processed value. By predefined Vue.js have many filter functions. Here the pipe (|) will be used as delimiter.
Lets look at about the Vue.js filters

1. Capitalize
2. Uppercase
3. Lowercase
4. Currency
5. Pluralize
6. Json
7. Key
8. FilterBy
9. OrderBy

1. Capitalize

Which is used to convert the first letter of the sentence into capital

Example :

<h4> {{ 'example of vue js capitalize filter' | capitalize }} </h4>

Result : Example of vue js capitalize filter

2. Uppercase

Which is used to convert the string into capital letters

Example :

<h4> {{ 'example of vue js uppercase filter' | uppercase }} </h4>

Result : EXAMPLE OF VUE JS UPPERCASE FILTER

3. Lowercase

Which is used to convert the string into small letters

Example :

<h4> {{ 'example of vue js lowercase filter' | lowercase }} </h4>

Result : example of vue js lowercase filter

4. Currency

Which is used to pass the currency symbol. This filter has one optional argument which is by default ‘$’.


Example :

<h4> {{ 204986 | currency }} </h4>

Result : $204,986.00

Example with argument:

<h4> {{ 204986 | currency '₹' }} </h4>

Result : ₹204,986.00

5. Pluralize

Pluralizes the argument based on the filtered value. When there is exactly one arg, plural forms simply add an “s” at the end. When there are more than one argument, the arguments
will be used as array of strings corresponding to the single, double, triple … forms of the word to be pluralized. When the number to be pluralized exceeds the length of the args,
it will use the last entry in the array.

Example :

<h4> {{count count | pluralize item }} </h4>

Result : 1,2,3s

6. Json

Which will convert the value to json format and it has one optional argument.

Example :

<h4> {{ $data | json }} </h4>

Result : { “item”: [ 1, 2, 3 ] }

7. Key

  • Which will Wrap the handler so it only gets called when the keyCode matches the argument.
    Some string aliases for a few commonly-used keys
    enter
    tab
    delete
    esc
    up
    down
    left
    right
  • Example :
    <h4> <input v-on="keyup:writeHere | key enter"> </h4>

    On the time of key up it will execute the function called writeHere

8. Filter

Its like an normal filter it will show the result based on filtered values and it will work only on v-for.

Example :

<h4> <li v->
Result : { "item": [ 1, 2, 3 ] }

9. orderBy

Same like Filter it will work only in v-for. It will sort the key in asc as well as reverse order. Example :
<ul>
<li v->
Result :
Earphones - $20.00
 Laptop charger - $70.00
 Microphone - $25.00
 Monitor - $120.00
 Mouse - $40.00
Vue.js
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el: 'body',
			data: function() {
				return {
					'item' : [1,2,3],
					'numbers': [ 1, 2, 3, 4, 5 ],
					products: [
						      {name: 'microphone', price: 25, category: 'electronics'},
						      {name: 'laptop case', price: 15, category: 'accessories'},
						      {name: 'screen cleaner', price: 17, category: 'accessories'},
						      {name: 'laptop charger', price: 70, category: 'electronics'},
						      {name: 'mouse', price: 40, category: 'electronics'},
						      {name: 'earphones', price: 20, category: 'electronics'},
						      {name: 'monitor', price: 120, category: 'electronics'}
						    ]
				}
			},
			computed: {
			  evenNumbers: function () {
			    return this.numbers.filter(function (number) {
			      return number % 2 === 0
			    })
			  }
			}
		});
	</script>

Hope it will help for  someone.

Marimuthu: