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及心跳检测方式

    这篇文章主要介绍了vue(element ui)使用websocket及心跳检测方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Element-UI表格嵌入popover遇到的问题及解决方案

    Element-UI表格嵌入popover遇到的问题及解决方案

    在表格中我们通常需要在每一行的一些单元格中显示popover,这篇文章主要给大家介绍了关于Element-UI表格嵌入popover遇到的问题及解决方案,需要的朋友可以参考下
    2023-11-11
  • VUE脚手架具体使用方法

    VUE脚手架具体使用方法

    这篇文章主要介绍了VUE脚手架具体使用方法,vue-cli这个构建工具大大降低了webpack的使用难度,小编觉得不错,下面就一起来了解一下具体使用方法
    2019-05-05
  • 浅谈Vue.js路由管理器 Vue Router

    浅谈Vue.js路由管理器 Vue Router

    这篇文章主要介绍了Vue.js路由管理器 Vue Router,主要介绍的是路由元信息,命名路由以及嵌套路由等使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • 你不知道的SpringBoot与Vue部署解决方案

    你不知道的SpringBoot与Vue部署解决方案

    这篇文章主要介绍了你不知道的SpringBoot与Vue部署解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • vue实现计数器简单制作

    vue实现计数器简单制作

    这篇文章主要为大家详细介绍了vue实现计数器简单制作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Vue3+Vite+TS实现二次封装element-plus业务组件sfasga

    Vue3+Vite+TS实现二次封装element-plus业务组件sfasga

    这篇文章主要介绍了在Vue3+Vite+TS的基础上实现二次封装element-plus业务组件sfasga,下面文章也将围绕实现二次封装element-plus业务组件sfasga的相关介绍展开相关内容,具有一定的参考价值,需要的小伙伴可恶意参考一下
    2021-12-12
  • 利用Vue.js实现checkbox的全选反选效果

    利用Vue.js实现checkbox的全选反选效果

    最近用vue做了两个项目,都需要实现全选反选的功能,所以想着记录下分享给大家,方便自己或者有需要的朋友们参考讲学习,所以下面这篇文章主要介绍了利用Vue.js实现checkbox的全选反选效果,需要的朋友可以一起来学习学习。
    2017-01-01
  • Vue3使用路由VueRouter4的简单示例

    Vue3使用路由VueRouter4的简单示例

    在vue.js项目中使用vue-router,可以使用路由进行界面或路径跳转,下面这篇文章主要给大家介绍了关于Vue3使用路由VueRouter4的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-07-07
  • element中el-table与el-form同用并校验

    element中el-table与el-form同用并校验

    本文主要介绍了element中el-table与el-form同用并校验,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08

最新评论