在vue中使用过滤器对日期进行格式化,解决vue 动态拼接地址，使用本地的图片不显示

最新推荐文章于 2023-08-01 18:18:22 发布

原创最新推荐文章于 2023-08-01 18:18:22 发布 · 684 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

24 篇文章

订阅专栏

1.新建date.js文件

// 对Date的扩展，将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
Date.prototype.Format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}   

export function formatTimeToStr(times, pattern) {
    var d = new Date(times).Format("yyyy-MM-dd hh:mm:ss");
    if (pattern) {
        d = new Date(times).Format(pattern);
    }
    return d.toLocaleString();
}

2.在vue中对日期格式化，使用过滤器方式

<template>
  <div>
  <span>{{date | formatDate}}</span>
  </div>
  </template>
import {formatTimeToStr} from './js/date.js';
  export default {
    date() {
        return {
            date: 1496311370052
        }
    },
  filters: {
   formatDate: function(time) {
        if(time!=null&&time!="")
        {
          var date = new Date(time);
          return formatTimeToStr(date, "yyyy-MM-dd");
        }else{
          return "";
        }
      }
  }

3、在方法中对时间格式化

<template>
  <div>
    <ul>
     <li v-for="item in arr">
       <input type="text" v-model="item.createTime" />
     </li>
    </ul>
  </div>
  </template>
import {formatTimeToStr} from './js/date.js';
  export default {
    date() {
        return {
            date: 1496311370052
        }
    },
   mounted:{
    this. axios.get('/user', {
          params: {
            ID: 12345
          }
        })
    .then(function (res) {
        this.arr = res.body;
            for(var i=0; i<this.arr.length; i++){
              this.arr[i].createTime = formatTimeToStr(this.arr[i].createTime, 'yyyy-MM-dd')
            }
        })
       }
 }

vue 动态拼接地址，使用本地的图片不显示

<el-col :span="4" v-for="(item, index) in listData" :key="index">
        <div class="grid-content grid-icon">
          <router-link :to="item.url.replace('/', '-')">
            <!--<img src="'../../assets/img/'+item.imgUrl)" alt="">-->   //动态拼接地址，使用本地的图片不显示
            <img :src="require('../../assets/img/'+item.imgUrl)" alt=""> //换这个方法
            <span>{{item.name}}</span>
            <span>{{item.enName}}</span>
          </router-link>
        </div>
      </el-col>