The filters of vue are usually used in some common text formatting, and filters can be used in two places: double brace interpolation and v-bind expression.
For example, automatically add the Chinese character "￥" to the price or give a time period or (time stamp) to filter each other.
In the era of javascript and jquery! The display or submission of time periods must be converted when displayed or when submitted, which is a bit cumbersome (I feel cumbersome after using vue).
Let's take a look at the examples without further ado:
The filter defined by filter can be local, and the global one can be directly mentioned.
As usual, just wait to register a global filter keyword (filter)
The global registration filter is in this file, and of course it can also be in a separate js file.
('dateconversion', function (value) { // A time stamp to normal filter let date = new Date(value) // nuw one time let getHours // Hour let getMinutes // point if(() < 10){getHours = "0"+()}else{ getHours = ()}
// To determine whether the hour is less than 10, add 0 if(() < 10){getMinutes = "0"+()}else{ getMinutes = ()}
// To determine whether the score is less than 10, add 0 return ()+"-"+(()+1)+"-"+()+" "+ getHours +":"+ getMinutes // Return the converted value})
It is very convenient to use. It can be used in each component that needs to be converted to display time.
<template>
{{date | dateconversion}} // How to use it is simple, use the whole project at will</template>
<script>
export default {
data () {
return {
date: '' // Time stamp from the background }
}
}
</script>
alright! A brief introduction to the use of filters. In the next chapter, I will talk about a little more complicated, including series filters and filters with parameters.