How to use filters and implement custom filters in Vue

Vue is a popular JavaScript framework that is especially favored by front-end developers because of its ease of learning, ease of use, and flexibility. In Vue, filters are a very common function that can help us handle the conversion and formatting of some data, thereby making the data presentation clearer and more beautiful. This article will introduce the use of filters in Vue and how to implement custom filters.

1. The use of filters in Vue

Filters in Vue can be used to filter the data to be displayed, and they can be defined through global filters and local filters. Global filters can be used in any component of the application, while local filters can only be used in the current component.

The following is a simple example showing how to use filters in Vue:

<div id="app">
  <p>原始字符串：{{ message }}</p>
  <p>过滤后字符串：{{ message | reverse }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  },
  filters: {
    reverse: function(value) {
      return value.split('').reverse().join('')
    }
  }
})
</script>

In the above code, we define a global filter reverse that accepts a string as argument and returns the result of inverting it. In the template, we use the | symbol to call this filter, and the message data is processed by the filter before displaying it.

2. Custom filter implementation method

In Vue, we can customize filters to meet specific needs. Below is an example of a custom filter that converts a date string into a date in a specified format.

<div id="app">
  <p>原始日期：{{ date }}</p>
  <p>转换后日期：{{ date | dateFormat('yyyy-MM-dd') }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    date: '2021/01/01'
  },
  filters: {
    dateFormat: function(value, format) {
      var date = new Date(value)
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      var hour = date.getHours()
      var minute = date.getMinutes()
      var second = date.getSeconds()

      format = format.replace('yyyy', year)
      format = format.replace('MM', pad(month))
      format = format.replace('dd', pad(day))
      format = format.replace('hh', pad(hour))
      format = format.replace('mm', pad(minute))
      format = format.replace('ss', pad(second))

      return format
    }
  }
})

function pad(number) {
  return number < 10 ? '0' + number : number
}
</script>

In the above code, we define a partial filter dateFormat, which accepts two parameters, one is the date string and the other is the date format. Inside the filter function, we convert the string into a date through the Date object in JavaScript and concatenate it according to the specified format. Among them, we use a zero-padding function pad to add zero to the front of a single number of months, days, hours, minutes, and seconds.

The format of the custom filter is as follows:

filters: {
  filterName: function(value[, arg1, arg2, ...]) {
    // filter function body
    return filteredValue
  }
}

Among them, filterName is the name of the filter, value is the data to be filtered, and the following arg1, arg2, etc. are optional parameters. Use For passing additional data or setting formats, etc. The filter function can transform the input data and return the filtered results.

Summary:

In this article, we learned how to use filters in Vue and how to implement custom filters. Whether it is a global filter or a local filter, it can help us process the data and make it more beautiful and readable. The implementation method of custom filters is also very simple. You only need to define the function according to the format of the filter. Hope this article is helpful to everyone.

The above is the detailed content of How to use filters and implement custom filters in Vue. For more information, please follow other related articles on the PHP Chinese website!