vue中使用moment.js(时间格式化插件)

安装moment.js

npm install moment --save

全局过滤器

main.js中

import moment from 'moment'
//定义一个全局过滤器实现日期格式化
Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳时,需转为Number类型
  // 使用momentjs这个日期格式化类库实现日期的格式化功能
  return moment(input).format(fmtstring);
});

vue文件中

<p class="subtitle">
     <span>发表时间:{{ createTime | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>   
 </p>

全局方法(在vue实例挂载moment方法)

main.js中

import moment from 'moment'
Vue.prototype.$moment = moment

在vue文件中

const createDate = this.$moment(this.createTime).format('YYYY-MM-DD') //2019-04-11

### 使用 Moment.js 进行日期和时间处理 为了在 Vue 3 中集成并使用 `moment.js` 来执行日期和时间操作,可以遵循如下方法: #### 安装依赖库 首先,在项目中安装 `moment.js` 库。通过 npm 或 yarn 执行命令来完成这一步骤。 ```bash npm install moment ``` 或者如果偏好使用 yarn: ```bash yarn add moment ``` #### 导入与初始化 接着,在组件内部导入 `moment.js` 并开始利用它来进行各种各样的日期运算或是格式化工作。 ```javascript // 在单文件组件 <script> 部分顶部引入Moment import moment from &#39;moment&#39;; export default { data() { return { currentDate: moment().format(&#39;YYYY-MM-DD&#39;) // 获取当前日期作为初始值 } }, methods: { formatDate(dateString) { const formattedDate = moment(dateString).format(&#39;MMMM Do YYYY&#39;); console.log(formattedDate); return formattedDate; } } } ``` 值得注意的是,尽管上述方式展示了如何直接在一个单独的 Vue 组件里加载 `moment.js`[^1],但在大型应用中推荐创建一个全局混入或插件以便在整个应用程序范围内共享此功能。 #### 创建全局工具函数 考虑到性能因素以及减少重复代码量,建议构建一个独立的服务层用于封装所有关于时刻的操作逻辑。这样不仅提高了可维护性也方便后续升级至更高效的替代方案比如 Luxon 或者 date-fns。 ```javascript // src/utils/datetime.js import moment from &#39;moment&#39;; const datetimeUtil = { format(date, fmt=&#39;LL&#39;){ return moment(date).format(fmt); }, // 更多功能... }; export default datetimeUtil; // main.js 中注册为全局属性 import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; import datetimeUtil from &#39;./utils/datetime&#39;; createApp(App) .config.globalProperties.$datetime = datetimeUtil; // 注册到全局配置下 ``` 现在可以在任何地方访问 `$datetime.format()` 方法而无需再次手动导入 `moment.js`.
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值