日期格式化
日期格式化插件: https://www.bootcdn.cn/
moment.js、day.js(轻量级moment.js)
插件用法:双击day.js==>复制链接并访问==》另存为dayjs.min==》项目中引用
https://github.com/iamkun/dayjs/blob/dev/docs/zh-cn/README.zh-CN.md
过滤器总结:
定义:对要显示的数据进行特定格式化后再进行显示——适用于一些简单逻辑的处理。
语法:
- 注册过滤器:Vue.filter(name,callback) 或 new Vue{filters:{}}
- 使用过滤器:{{xxx|过滤器1|过滤器N}} 或 v-bind:属性="xxx|过滤器"
备注:
- 过滤器也可以接受额外参数、多个过滤器也可以串联
- 并没有改变原本的数据,是产生新的对应的数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>过滤器</title> <script type="text/javascript" src="../Js/vue.js"></script> <script type="text/javascript" src="../Js/dayjs.min.js"></script> </head> <!-- 日期格式化插件 https://www.bootcdn.cn/ moment.js、day.js(轻量级moment.js) --> <body> <div id="root"> <h2>时间格式化:</h2> <hr> <h3>时间戳现在是:{{time}}</h3> <h3>computed格式化时间是:{{formatTime}}</h3> <h3>methods格式化时间是:{{getFormatTime()}}</h3> <h3>过滤器实现格式化时间是:{{time|filTimeFormater}}</h3> <h3>过滤器实现格式化时间是:{{time|filTimeFormater()}}</h3> <h3>过滤器实现格式化时间是:{{time|filTimeFormater2('YYYY-MM-DD HH:mm:ss')}}</h3> <h3>过滤器实现格式化时间是:{{time|filTimeFormater2('YYYY-MM-DD')}}</h3> <h3>过滤器实现格式化时间是:{{time|filTimeFormater3('YYYY-MM-DD')}}</h3> <h3>过滤器实现格式化时间是:{{time|filTimeFormater3()}}</h3> <h3>过滤器实现格式化时间是:{{time|filGetYear}}</h3> <hr> <!-- 完成第一个过滤器后,继续串联进行第二个过滤器 不能把过滤器和方法或计算属性串联哦 --> <h3>多过滤器串联格式化:{{time|filTimeFormater3|filGetYear2}}</h3> <hr> </div> <div id="root2"> <h3>使用局部过滤器会失效,控制台会出错哦:{{msg|filGetYear2}}</h3> <hr> <h3>全局过滤器来了:{{msg|mySlice}}</h3> </div> </body> </html> <script type="text/javascript"> Vue.config.productionTip = false // 全局过滤器 Vue.filter('mySlice', function (value) { return value.slice(0, 4)//字符串截取 }) const vm = new Vue({ el: '#root', data: { time: Date.now(), errorInfo: '看看,提示信息来喽' }, computed: { formatTime () { return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss') }, }, methods: { getFormatTime () { // return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss') return dayjs(Date.now()).format('YYYY-MM-DD HH:mm:ss') }, }, // 在vm中的局部过滤器 filters: { filTimeFormater (value) { return dayjs(value).format('YYYY-MM-DD HH:mm:ss') }, // 默认第一个入参为time--即过滤器本身的值 filTimeFormater2 (value, paraStr) { return dayjs(value).format(paraStr) }, // 过滤器可设置默认入参 filTimeFormater3 (value, paraStr = 'YYYY-MM-DD HH:mm:ss') { return dayjs(value).format(paraStr) }, filGetYear (val, str = 'YYYY') { return dayjs(val).format(str) }, filGetYear2 (val) { return val.slice(0, 4)//字符串截取 }, }, }) new Vue({ el: '#root2', data: { msg: '我想死你了', }, }) </script>
博客内容主要用于日常学习记录,内容比较随意,如有问题,还需谅解!!!