Vue, a filter is used!

        Vue.js allows custom filters, can be used for some common text formatting. Filters can be used in two places: double braces interpolation and v-bind expressions. The filter should be added at the end of a JavaScript expression by the "pipe" symbol indicates; (borrow under official to introduce, went straight to the next topic)

 

1, define global filters! Any component can be used.

define global filters main.js

//   define the length of the filter 10 is 
Vue.filter ( 'length10', (E) => {
   return e.slice (0,10) + '...' 
}) 
//   define a filter transfer case 
Vue .filter ( 'the toUpperCase', (E) => {
  return   e.toUpperCase () 
})

app.vue use

// Template 
  <div> STR {{}} </ div> 
  <div> {{STR | length10}} </ div> 
  <div> {{str1 | length10 | the toUpperCase}} </ div> //   Script Data ( ) {
     return { 
      str: 'No public "front-end pseudo-uncle," welcome to come to attention! ' , 
      Str1: ' qianduanweidashu ' 
    } 
  }
  

Summary: The method of using a filter '|' directly using a plurality of filters may be used

 

2, the filter parameter passing, look / smile cry

main.js

Vue.filter('Biography',(e,str1) =>{
     return e.slice(0,str1) + '...'
}

App.vue

//   Template 
<div> {{str | Biography (9)}} </ div> //   Script the Data () {
     return { 
      str: 'No public "front-end pseudo-uncle," welcome to come to attention! ' , 
    } 
  }

 

3, the filter assembly

The filter assembly, the method needs definitions are filtets this object, the object defined above;

//   Template 
  <div> {{STR | length (. 9)}} </ div> 
  <div> {{str1 | length (. 9) |}} the toUpperCase </ div> //   Script Data () {
     return { 
      STR: "public No." uncle distal pseudo "Welcome to come to attention!" , 
      str1: 'qianduanweidashu' 
    }; 
  }, //   this is the object filters   filters: {
 //   enter your own longitudinal     length (E, NUM) {
       return E .slice (0, NUM) + "..." ; 
    }, //   uppercase     the toUpperCase (E) {
       return e.toUpperCase (); 
    } 
  }
  

Summary: filters is a partial filter, can only be used within the assembly; and global parameters can be transferred as a filter, while using a plurality of filters;

 

 

 If you like it, welcome attention to the "front-end pseudo-uncle," I will share the front end of your ongoing learning knowledge!