Vue之过滤器详解
更新时间:2021年11月21日 16:07:33 作者:王同学要努力
这篇文章主要为大家介绍了Vue之过滤器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助,希望能够给你带来帮助
<body> <div id="root"> <h2>显示格式化后的时间</h2> <!-- 计算属性实现 --> <h2>现在是{{fmtTime}}</h2> <!-- methods实现 --> <h2>现在是{{getFmtTime()}}</h2> <!-- 过滤器时间实现--> <h2>现在是{{time | timeFormater}}</h2> </div> <div id="root2"> <h2>现在是:{{msg |mySlice }}</h2> </div> <script> Vue.config.productionTip = false; //全局过滤器 Vue.filter('mySlice', function(value) { return value.slice(0, 4) }) new Vue({ el: "#root", data: { time: 1637047951556 //时间戳 }, computed: { fmtTime() { return dayjs(this.time).format('YYYY年MM月DD HH:mm:ss') } }, methods: { getFmtTime() { return dayjs(this.time).format('YYYY年MM月DD HH:mm:ss') } }, filters: { timeFormater(value) { return dayjs(value).format('YYYY年MM月DD HH: mm: ss ') } }, }) new Vue({ el: "#root2", data: { msg: 'hello world' } }) </script> </body>
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!
相关文章
vue(element ui)使用websocket及心跳检测方式
这篇文章主要介绍了vue(element ui)使用websocket及心跳检测方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07Element-UI表格嵌入popover遇到的问题及解决方案
在表格中我们通常需要在每一行的一些单元格中显示popover,这篇文章主要给大家介绍了关于Element-UI表格嵌入popover遇到的问题及解决方案,需要的朋友可以参考下2023-11-11Vue3+Vite+TS实现二次封装element-plus业务组件sfasga
这篇文章主要介绍了在Vue3+Vite+TS的基础上实现二次封装element-plus业务组件sfasga,下面文章也将围绕实现二次封装element-plus业务组件sfasga的相关介绍展开相关内容,具有一定的参考价值,需要的小伙伴可恶意参考一下2021-12-12
最新评论