Web Front-end vue filter, web Front-end vuefilter

Web Front-end vue filter, web Front-end vuefilter

Vue filters are usually used in some common Text Formatting. Filters can be used in two places: Double curly brackets interpolation and v-bind expressions.

For example, the Chinese character "￥" is automatically added to the price, or the conversion filtering between a time period or (timestamp.

In the age of javascript and jquery! The display or submission of the time period must be switched to the display time or the submission time. This is a little complicated (I feel complicated after using vue ).

Let's just look at the example below:

The filter defined by the filter can be local. The Global filter can be directly described below.

As always, register a global filter keyword first)

The global registration filter is in the main. js file. Of course, it can also be a separate js file.

Vue. filter ('dateconversion', function (value) {// a time stamp to convert the normal filter let date = new Date (value) // nuw one time let getHours // hour let getMinutes // minute if (date. getHours () <10) {getHours = "0" + date. getHours ()} else {getHours = date. getHours ()} // determine whether the hour is less than 10 completion: Add 0 if (date. getMinutes () <10) {getMinutes = "0" + date. getMinutes ()} else {getMinutes = date. getMinutes ()} // determine whether the score is less than 10 completion: Add 0 return date. getFullYear () + "-" + (date. getMonth () + 1) + "-" + date. getDate () + "" + getHours + ":" + getMinutes // return the converted value })

It is easy to use and can be used to convert and display time in every component.

<Template >{{ date | dateconversion }}// usage is simple. You can use </template> <script> export default {data () for the entire project () {return {date: ''// The timestamp sent from the background }}</script>

Okay! This section briefly introduces how to use filters. In the next chapter, I will introduce a little more complex, Series filters and filters with parameters.