Example of method using filters in vue2 v-model/v-text

Custom filters are allowed, which can generally be used in two places: double brace interpolation and v-bind expression (the latter is supported since 2.1.0+). Filters should be added at the end of a JavaScript expression, indicated by the "pipe" symbol:

&lt;!-- In double braces --&gt;
{{ message | capitalize }}

&lt;!-- exist v-bind middle --&gt;
&lt;div v-bind:&gt;&lt;/div&gt;

Private filters can be defined in the options of a component:

filters: {
  dateFormat： (dataStr) => {
   var time = new Date(dataStr);
  
   function timeAdd0(str) {
    if (str < 10) {
     str = '0' + str;
    }
    return str
   }
   var y = ();
   var m = () + 1;
   var d = ();
   var h = ();
   var mm = ();
   var s = ();
   return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s);
  }
}

Or define the filter globally before creating a Vue instance:

('dateFormat', (dataStr) => {
 var time = new Date(dataStr);

 function timeAdd0(str) {
  if (str < 10) {
   str = '0' + str;
  }
  return str
 }
 var y = ();
 var m = () + 1;
 var d = ();
 var h = ();
 var mm = ();
 var s = ();
 return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s);
})

However, if you want to use filters in v-model or v-text, it will not take effect, you can refer to the following writing method:

<template>
 <div >
  <input type="text" v-model="userDate" />  
  <span>{{ userDate | dateFormat }}</span>
 </div>
</template>

<script>
export default {
  data: {
    return {
      userDate:'',
    }
  },
    filters: {
    dateFormat： (dataStr) => {
     var time = new Date(dataStr);
    
     function timeAdd0(str) {
      if (str < 10) {
       str = '0' + str;
      }
      return str
     }
     var y = ();
     var m = () + 1;
     var d = ();
     var h = ();
     var mm = ();
     var s = ();
     return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s);
    }
  }
}
</script>

<style>
</style>

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.