Detailed explanation of Vue.filter function and how to customize filters

Detailed explanation of Vue.filter function and how to customize filters

In Vue.js, filter (Filter) is a function that can be added in template expressions to handle text formatting and data preprocessing. The Vue.filter method is a flexible way provided by Vue.js for defining and registering global filters, which can be used in the template of any component.

1. Syntax and usage of Vue.filter function

The syntax of Vue.filter function is as follows:

Vue.filter( id, [definition] )

Among them, id is the name of the filter, and definition can be a function or an object. If it is a function, it will be used as a filter function; if it is an object, it can have two attributes: read and write, which are used for filtering display and Function to filter input.

Using the Vue.filter function, global filters can be defined and registered anywhere in the Vue instance. Here is an example:

Vue.filter('capitalize', function(value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  }
})

In the above code snippet, we have defined a filter named capitalize that converts the first letter of the text to uppercase. Then, in the Vue instance, we can use the filter in the template:

<div id="app">
  <p>{{ message | capitalize }}</p>
</div>

The above code will render Hello world.

2. Custom filters

In addition to using the Vue.filter function to define global filters, we can also customize local filters. In the Vue component, you can register local filters through the Filters option.

The following is an example of a custom partial filter:

<div id="app">
  <p>{{ message | uppercase }}</p>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'hello world'
    },
    filters: {
      uppercase: function(value) {
        if (!value) return ''
        value = value.toString()
        return value.toUpperCase()
      }
    }
  })
</script>

In the above code, we define a partial filter named uppercase and add it in the template Use this filter in . Here the value of message will be converted to uppercase and rendered.

3. Chained calls of filters

In Vue.js, filters also support chained calls, that is, multiple filters can be used in one expression.

The following is an example of chaining multiple filters:

<div id="app">
  <p>{{ message | capitalize | reverse }}</p>
</div>

<script>
Vue.filter('capitalize', function(value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

Vue.filter('reverse', function(value) {
  if (!value) return ''
  value = value.toString()
  return value.split('').reverse().join('')
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  }
})
</script>

In the above code, we define two filters: capitalize is used to convert text The first letter of is converted to uppercase, and reverse is used to reverse the text. Then, in the template, we used a chain call, first converting the value of message to uppercase, then inverting and rendering it.

Summary:
This article explains in detail the syntax and usage of the Vue.filter function, and how to customize global filters and local filters. At the same time, the chain call of filters is also introduced. By using filters appropriately, we can easily implement text formatting and data preprocessing functions, making the page more flexible and efficient. I hope it will be helpful to your Vue.js development.

The above is the detailed content of Detailed explanation of Vue.filter function and how to customize filters. For more information, please follow other related articles on the PHP Chinese website!