How to use filters in the Vue2.0 series?-JS Tutorial-php.cn

This article mainly introduces the use of filters in the Vue2.0 series. Now I share it with you and give you a reference.

vue2.0 has abandoned filters and requires custom filters for some common text formatting.

It feels super easy to use! !

Filters can be used in two places: double curly brace interpolation and v-bind expressions.

Filters should be added at the end of JavaScript expressions, indicated by the pipe character.

1. Register a global filter

Notes:
1. Register a custom filter with the global method Vue.filter() The filter must be placed before vue instantiation
2. The filter function always takes the value of the expression as the first parameter. Parameters with quotes are treated as strings, and parameters without quotes are calculated according to the expression
3. Two filter parameters can be set, provided that the processing of the two filters does not conflict.
4. The data input by the user from the input can also be processed before being transmitted to the model.

Case

    过滤器 
    
首字母大写过滤器：{{str | upcase}}
  求和过滤器：{{message | sum(10,20)}}

Copy after login

Case effect:

2. Register inside the instantiation

Filtering The controller can also be registered inside an instance, only in the instance that uses it.

Adapted from the above case:

     
    
首字母大写过滤器：{{str | upcase}}
  求和过滤器：{{message | sum(10,20)}}

Copy after login

Effect:

##3. Common filters

Convert to time format based on timestamp: mm-dd hh:tt

     
    
根据时间戳转化为时间：{{ str | formateTime}}

Copy after login

Case effect:

The above is me I compiled it for everyone, I hope it will be helpful to everyone in the future.

About how to insert variable parameters in vue.js tag attributes (detailed tutorial)

About How to close a component by clicking outside the component in Vue (detailed tutorial)

Detailed solution for you to solve the problem of white screen on the homepage after vue build is packaged (detailed tutorial)

The above is the detailed content of How to use filters in the Vue2.0 series?. For more information, please follow other related articles on the PHP Chinese website!