解决vue页面上显示NAN的问题:使用时间格式化插件moment.js

最新推荐文章于 2024-07-14 22:44:48 发布
最新推荐文章于 2024-07-14 22:44:48 发布
阅读量7.6k 收藏 4
点赞数
文章标签： moment NAN 时间格式化 日期 过滤器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lezeqe/article/details/100695314
版权

目录

今天在调试一个vue项目时，遇到这样的问题，如下图：

 那怎么解决呢？使用moment.js插件。步骤如下：

第一：在项目中，新建moment.js，再把http://momentjs.cn/downloads/moment.js 的代码放进去；

第二：在.vue文件中，引入插件moment

 第三：在.vue文件

第åï¼Â å¨.vueæ件æ ç­¾éï¼åæåé转为dateç±»åï¼åæ·»å è¿æ»¤å¨

ç»æå¦ä¸ï¼

今天在调试一个vue项目时，遇到这样的问题，如下图：

 那怎么解决呢？使用moment.js插件。步骤如下：

第一：在项目中，新建moment.js，再把http://momentjs.cn/downloads/moment.js 的代码放进去；

第二：在.vue文件中，引入插件moment

 第三：在.vue文件<script>标签里，添加过滤器函数

第四： 在.vue文件<template>标签里，先把变量转为date类型，再添加过滤器

结果如下：

 

lezeqe
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在vue项目中获取的duration属性值为NaN或者undefined.md
11-24
在创建一个vue项目时，获取标签中duration属性值为空或者未定义的情况，针对以上可能出现的两种情况，本文给出作者本人的一些实践成功后的方法。
Vue：简述Vue开发中的NaN类型
王小二(海阔天空)
01-05 1万+
NaN 属性代表一个“不是数字”的值。这个特殊的值是因为运算不能执行而导致的，不能执行的原因要么是因为其中的运算对象之一非数字（例如， “abc” / 4），要么是因为运算的结果非数字（例如，除数为零）。 虽然 NaN 意味着“不是数字”，但是它的类型是 Number： console.log(typeof NaN === "number"); // logs "true" 此外NaN 和任何...
vue 中时间日期格式处理
最新发布
wk的博客
07-14 2172
<p>格式化日期: <span v-date-format="dateString"></span></p><p>自定义格式: <span v-date-format:YYYY/MM/DD="dateString"></span></p>data() {return {
vue的NAN类型
AI_Goblin的博客
06-05 1043
Vue NAN类型处理 文章：https://blog.csdn.net/qq_29229567/article/details/103845532 主要用到的解决方法： 解决办法是使用 value !== value，如果值等于NaN，只会产生true。 例如: 在这里插入代码片if(e.detail.value !== 0){ this.conferenceInfo[prop] = 0; }else{ this.conferenceInfo[prop] = Number(e.d
vue项目中判断为NaN的值方法
iSmilee的博客
05-12 7652
用 isNaN 方法，如下： <view class="asset-name">车位数(个)： <view v-if="isNaN(item.carNum)" class="flex-scroll">无</view> <view v-else class="flex-scroll">{{item.carNum}}</view> </view>
Vue中的数字运算有时候会出现NAN的情况
热门推荐
TheHtmler的博客
07-19 1万+
vue的html中，经常会出现，需要对获取的数据进行加减乘除运算的情况，如果在表达式中进行运算，例：{{ a + b + c }}，这种会导致，你在获取数据的时候，值还没取到，dom刚开始渲染，所以a，b，c的值做运算，会显示NAN，等到数据获取结束，才会显示运算结果，对于这种短暂的NAN的闪现，往往会影响用户体验，具体给出解决办法，一种是加loading，通过loading来覆盖NAN，...
vue.js实现格式化时间并每秒更新显示功能示例
10-18
本文就以一个具体的示例来讲解在Vue.js中如何实现时间的格式化显示，并且每秒实时更新该时间。 首先，在Vue实例中我们使用`filters`选项来创建自定义过滤器，过滤器是Vue.js中用来进行文本格式化的功能，它可以用在...
vuex-i18n：使用vuex作为存储的vue.js 2.0本地化插件
02-28
我们是很棒的vue，vuex和vue-router库的忠实拥护者，他们只是在寻找易于使用的国际化插件，并尽可能多地使用“标准库”。 与其他国际化插件的主要区别是直接在应用程序中或以后从服务器直接使用和支持语言环境。 ...
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
10-18
2. 在需要避免内容闪现的Vue.js组件或元素上使用v-cloak指令。 示例HTML部分如下： ```html <h1>{{message}} <h1>{{name}} ``` 在这个例子中，id为"app"的div元素及其子元素在Vue实例编译完成之前不会...
【JavaScript源代码】vue利用Moment插件格式化时间的实例代码.docx
12-29
Vue.js 是一个流行的前端框架，它允许开发者构建用户界面，而Moment.js 是一个强大的JavaScript日期管理库，提供了丰富的日期处理和格式化功能。在Vue项目中集成Moment.js，可以方便地对时间数据进行操作和展示。 ...
nuxt-vue-multiselect:使用vue-multiselect的Nuxt.js的单选选择插件
05-12
添加nuxt-vue-multiselect到modules的部分nuxt.config.js 配置它： { modules : [ 'nuxt-vue-multiselect' ] } 发展 克隆此存储库 使用yarn install或npm install安装依赖项 使用npm run dev启动开发服务器 执照...
vue中获取视频总时长返回NaN的解决办法
qq_51035159的博客
03-14 655
在网上查询了一下是视频没有加载完的问题在这里记录一下，需要使用。
前端页面莫名出现了NaN的问题怎么解决？
weixin_49080355的博客
08-25 3933
前端页面莫名出现了NaN的问题怎么解决？ 今天动态的向ul标签中添加li标签时，页面莫名出现了NaN的字段，经过研究发现是拼接代码的时候多打了一个+号，删除之后就完美解决了。
vue项目中时间格式化出现NaN
czp555的博客
10-08 4711
1.VUE组件中这样写 2.过滤器 filters:{ formatDateTime:function(val){ varvalue=newDate(val); varyear=value.getFullYear(); varmonth=padDate(value.getMonth()+1); ...
学习前端整理的js中的NaN知识点
xiaxianger的博客
03-02 1639
NaN：not a number, 表示一个非数字 在js中，NaN用来表示一个非数字的特殊值，当发现无法进行运算时，js不会报错，而是会返回一个NaN NaN的注意事项： NaN的类型是number类型的，表示一个非数字 NaN不等于任何值，包括NaN本身 通过isNaN()可以判断是否是一个数字，返回false的时候，表示是一个数字 alert(NaN == NaN);//返回fal...
js根据时间戳获取日期失败，NaN-NaN-NaN NaN:NaN:NaN
qq_18745063的博客
04-19 4632
function getDate(timestamp) { var myDate = new Date(timestamp * 1000); var month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月) return myDate.getFullYear() + '-' + month + '-' + myDate.getDate() + ' ' + myDate.getHours() + ':' + .
前端NaN解决方案
weixin_61503139的博客
11-14 326
【代码】前端NaN解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值