【vue案例】vue带参数的过滤器实现日期格式化(yyyy-MM-dd)

vue过滤器实现日期格式化

文章目录

  • vue过滤器实现日期格式化
    • 获取当前时间
    • 格式化当前时间
    • 完整代码

利用带参数的过滤器实现当前日期格式化

获取当前时间

{ {date}}
data: { date:new Date() }

格式化当前时间

利用带参数的过滤器,format中的参数由过滤器中的arg得到

{ {date | format('yyyy-MM-dd')}}
Vue.filter('format',function(val,arg){ if(arg == 'yyyy-MM-dd'){ var ret = '' ret += val.getFullYear()+'-'+(val.getMonth()+1)+'-'+val.getDate() return ret } return val })

完整代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
    
    <div id="app">
        
        <div>{
    {date | format('yyyy-MM-dd')}}div>
    div>
    
    <script  type="text/javascript" src="../script/vue.min.js">script>
    
    <script type="text/javascript">

        Vue.filter('format',function(val,arg){
      
            if(arg == 'yyyy-MM-dd'){
      
                var ret = ''
                ret += val.getFullYear()+'-'+(val.getMonth()+1)+'-'+val.getDate()
                return ret
            }
            return val
            
        })
        new Vue({
      
            el: '#app',
            data: {
      
                date:new Date()
            }
    script>
body>
html>

你可能感兴趣的:(Vue,过滤器,vue,js)