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以组件或者插件的形式实现throttle或者debounce
这篇文章主要介绍了vue以组件或者插件的形式实现throttle或者debounce,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-05-05Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
then 方法是 Promise 中 处理的是异步调用,异步调用是非阻塞式的,在调用的时候并不知道它什么时候结束,也就不会等到他返回一个有效数据之后再进行下一步处理,这篇文章主要介绍了Vue 中 Promise 的then方法异步使用及async/await 异步使用总结,需要的朋友可以参考下2023-01-01解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
这篇文章主要介绍了解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论