1. Reference the filter usage in the vue file

/ / demand: in order to realize this format 9900 - > 9990.00 < template > {{val | filterMoney}} < / template > < script > export default {data () {val: '' }, filters: { filterMoney (money) { return Number(money).toFixed(2).replace(/(\d)(? =(\d{3})+\.) /g, '$1,'); } } } </script>Copy the code

2. Reference the filter usage globally in vUE

Background return values For example, F – > female and M – > male can be processed uniformly through filters.

Reference the filter in the entry main.js:

import vueFilter from '@/filters/index.js';
for (let key in vueFilter) {
  Vue.filter(key, vueFilter[key]);
}
Copy the code

or

// import * as filters from './filters/index' object.keys (filters).foreach (key => {vue.filter (key, filters[key]) })Copy the code

The format/index.js code introduced is as follows:

/* * const vFilter = {// sexFormat: function (val) {if (val === 'F') {return 'female '; } else if (val === 'M') {return 'male '; } else if (val === '0') {return 'other '; } else {return 'unknown '; Function (val) {if (val === '0') {return 'unmarried '; } else if (val === '1') {return 'married '; }}, / / date 2018-11-16 10:55:58 dateFormat: function (val) {if (val) {return val. Slice (0, 16) | | '. }}, 2018-11-16T03:34:03.000+0000 dateFormat2: function (val) {if (val) {var arr = val. Split ('T'); return arr[0] + ' ' + arr[1].slice(0, 5); }}}; export default vFilter;Copy the code

You can use the defined filter directly in the VUE file

Gender < div > < label > < / label > {{patientSex | sexFormat}} < / div > < script > import filter from '@ / filters/index' export default { data () { return { patientSex : 'F' } } } </script>Copy the code

3. Filter (multi-parameter) Parameter transmission

3.1 Pass a Parameter

/ / HTML {{a1 | filterAa}} / / js filters: {filterAa (a1) {/ / a1 is the incoming parameters}}Copy the code

3.2 Pass two Parameters

/ / HTML {{a1 | filterAa (a2)}} / / js filters: {filterAa (a1, a2) {/ / a1 is the first parameter to the incoming / / a2 is introduced to the second parameter}}Copy the code

3.3 Pass three parameters

/ / HTML {{a1 | filterAa (a2, a3)}} / / js filters: {filterAa (a1, a2, a3) {/ / a1 is the first parameter to the incoming / / a2 is introduced into the second parameter / / a3 is introduced into the third argument}}Copy the code

3.4 Sending Multiple Parameters (3+)

/ / HTML {{a1 | filterAa (a2, a3,... the an...)}} / / js filters: {filterAa (a1, a2, a3,... the an...) {/ / a1 is the first parameter to the incoming / / a2 is introduced into the second parameter / / A3 is the third argument passed in // and so on // an is the NTH argument passed in}}Copy the code

If this article is helpful to you, thank you for your careful heart, your support is my motivation to continue to create!

Finally: writing is not easy, if you want to cut, please indicate the source of reprint.