Vue中在main.js中注册全局的时间过滤器

在main.js通过: Vue.filter() 去定义一个全局的时间过滤器,
第一个参数是过滤器的名字,如:dataFormt,
第二个是时间过滤器的处理函数:function(),需指定一个形参:originVal,这个originVal形参就是需要处理时间数据;
拿到originVal时间,先new Date,同时将originVal传过去,即根据本地的时间得到一个时间的日期对象

通过 getFullYear()拿到四位的年份

通过getMonth()获得月份,月份从1开始故使其+1;
若月份不足两位,在前面补0,通过调用 .padStart(2, ‘0’) 实现,其中第一个参数代表总长度为多少位,第二个参数是字符串,如果不足多少位的话用哪个字符串来填充

通过:getDate()获得当前的日期

通过:getHours() 获得当前的小时

通过:getMinutes() 获得当前的分钟

通过:getSeconds() 获得当前的秒钟

让获得年月日时分秒拼接成一个完整的日期字符串
return ${y}-${m}-${d} ${hh}:${mm}:${ss}

//格式化时间过滤器
Vue.filter(‘dataFormt’, function (originVal) {
const dt = new Date(originVal)

const y = dt.getFullYear()
const m = (dt.getMonth() + 1 + ‘’).padStart(2, ‘0’)
const d = (dt.getDate() + ‘’).padStart(2, ‘0’)

const hh = (dt.getHours() + ‘’).padStart(2, ‘0’)
const mm = (dt.getMinutes() + ‘’).padStart(2, ‘0’)
const ss = (dt.getSeconds() + ‘’).padStart(2, ‘0’)

return ${y}-${m}-${d} ${hh}:${mm}:${ss}

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是搭建Vue脚手架工程的具体步骤: 1. 安装Vue CLI:打开终端(Terminal)窗口,使用npm命令安装Vue CLI。输入以下命令并按回车键执行: ``` npm install -g @vue/cli ``` 2. 创建Vue项目:在终端窗口使用Vue CLI创建一个新的Vue项目。输入以下命令并按回车键执行: ``` vue create my-app ``` 这里的“my-app”是你自己设置的项目名称。在创建项目过程,你可以选择使用默认的配置或者自定义配置。 3. 创建子组件:在src/components文件夹下创建5个子组件,其两个组件名为Student和School,并在App.vue组件引入并管理它们。 4. 在main.js引入App组件和Vue:打开src/main.js文件,引入App.vue组件和Vue,并将App组件挂载到id为“app”的DOM元素上。 ```javascript import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') ``` 5. 在index.html引入main.js:打开public/index.html文件,引入main.js文件。 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my-app</title> </head> <body> <div id="app"></div> <script src="./src/main.js"></script> </body> </html> ``` 6. 在至少两个组件采用CSS样式,并至少引入一个静态资源:在组件使用style标签添加CSS样式,并在需要的地方使用img标签引入静态资源。 7. 组件data数据不少于4个,所有组件必须使用methods配置项:在组件定义data选项,并至少定义4个数据属性。同时,为了响应用户交互操作,所有组件必须使用methods配置项。 8. 在组件用到计算属性、监视属性、过滤器、数据绑定、事件处理、钩子函数不少于一次:在组件使用计算属性computed,监视属性watch,过滤器filters,数据绑定v-bind,事件处理v-on,钩子函数mounted等Vue特性。可以根据具体需求选用以上特性。 以上就是搭建Vue脚手架工程的具体步骤和要求。希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值