VueJS Filters : vuejs filter array Object json String Example

VueJS Filters : vuejs filter array Object json String Example

VueJS – filtering – JavaScript Example

Filters are simple functions that we can pass data or param into which gets all the data processed and a each data to filtered version of this param text data is returned.

Vue dynemically has a number of built in simple filters that we can check out all the data text string in the filters two way data filter section of the VueJs simple example guide. The pipe symbol use(|) Special char is used to denote a all the filter like.VueJS Filters:vuejs filter array Object json String Example

The Basics of Filters in VueJs

1. = capitalize using VueJS filter
2. = uppercase using VueJS filter
3. = lowercase using VueJS filter
4. = currency using VueJS filter
5. = pluralize using VueJS filter
6. = json using VueJS filter
7. = key using VueJS filter
8. = filterBy using VueJS filter
9. = orderBy using VueJS filter

Include Vuejs Lins

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>

Custom Filters

+Chaining Filters using Vuejs
+Custom Filters using Vuejs
-The Basics Filter using Vuejs
-Two-way Filters using Vuejs
-Dynamic Arguments using Vuejs

The Basics Custom Filter Example

Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('')
})

<!-- 'abc' => 'cba' -->
<span v-text="result | reverse"></span>

Vue.filter('myfilter', function (value, begin, end) {
  return begin + value + end
})
------------
<span v-text="result | myfilter 'before' 'after'"></span>

Filter with VueJS :Simple Uppercase Filter Example in VueJs

<div id="liveapp">
        <span>{{result.toUpperCase()}}</span>
</div>

var vm = new Vue({
  el: '#liveapp',
  data: {
    result: 'infinityknow.com'
   },
})

VueJS: Filter through objects in an array Example

<div id="myliveapp">
    <input type="text" v-model="myfilter"><br>
    <p v-for="item in lista">{{item.post | filtro myfilter}}</p>
</div>

VueJS: Filter through objects in an array

Vue.filter('filtro', function(value, input) {
		return (value.indexOf(input) != -1) ? value : null;
});

var K = new Vue({
		el: "#myliveapp",
    data: {
    	lista: [
      		{post: "laptop 1", value: "25000"},
          {post: "laptop 2", value: "50000"},
          {post: "laptop 3", value: "75000"},
          {post: "laptop 4", value: "100000"},
      ]
    },  
});

Example

Example