SoFunction
Updated on 2025-04-04

Format time filter code example in vue

This article has shared the specific code of the vue formatted time filter for your reference. The specific content is as follows

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="/vue"></script>
</head>
<body>
<div >
<div>
 {{ message | formatTime('YMD')}}
</div>
<div>
{{ message | formatTime('YMDHMS')}}
</div>
   <div>
    {{ message | formatTime('HMS')}}
   </div>
    <div>
    {{ message | formatTime('YM')}}
   </div>
    </div>
<script>
//Complete zero calculation of elementfunction addZero(val){
 if(val < 10){
  return "0" +val;
 }else{
  return val;
 }
};


(addZero(9))


//Implement the filter function in vue  Define the filter first. Use              value is the value before the filter, and type is the field defined in the filter("formatTime",function(value,type){
var dataTime="";
var data = new Date();  
             (value); 
     var year   =  ();  
             var month  =  addZero(() + 1);  
             var day    =  addZero(()); 
             var hour   =  addZero(());
var minute =  addZero(());
var second =  addZero(());
if(type == "YMD"){
dataTime =  year + "-"+ month + "-" + day;
}else if(type == "YMDHMS"){
dataTime = year + "-"+month + "-" + day + " " +hour+ ":"+minute+":" +second;
}else if(type == "HMS"){
dataTime = hour+":" + minute+":" + second;
}else if(type == "YM"){
dataTime = year + "-" + month;

}
return dataTime;//Output the formatted string to the front-end display});


var app = new Vue({
 el: '#app',
 data: {
   message: '1501068985877'
 }
         });
</script>
</body>
</html>

The above is a detailed explanation and integration of the vue formatting time filter introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!