vue中使用过滤器filters的this为undefined的问题

 更新时间:2022年01月23日 14:09:01   作者:HonGL54  
这篇文章主要介绍了vue中使用过滤器filters的this为undefined的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

使用过滤器filters的this为undefined

vue中的过滤器更偏向于对文本数据的转化,而不能依赖this上下文,如果需要使用到上下文this我们应该使用computed计算属性的或者一个method方法

vue filter过滤器的用法

{undefined{ args | filterFun }} |是管道符 用法如下

{{ time | formatDate }}

过滤器中

filters: {
        formatDate: value => {
           let date = new Date(value)
           let y = date.getFullYear()
           let MM = date.getMonth() + 1
           MM = MM < 10 ? "0" + MM : MM
           let d = date.getDate()
           d = d < 10 ? "0" + d : d
           let h = date.getHours()
           h = h < 10 ? "0" + h : h
           let m = date.getMinutes()
           m = m < 10 ? "0" + m : m
           let s = date.getSeconds()
           s = s < 10 ? "0" + s : s
           return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s
        }
    }

time 相当于想要过滤的值 传递给formatDate的参数

也可以多参数 {undefined{ time | formatDate(“嘿哈”) }}

这时过滤器中

//time 传递给 value    "嘿哈" 传递给 arg1
formatDate: (value,arg1) => {
    ......
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 如何在Vue单页面中进行业务数据的上报

    如何在Vue单页面中进行业务数据的上报

    为什么要在标题里加上一个业务数据的上报呢,因为在咱们前端项目中,可上报的数据维度太多,比如还有性能数据、页面错误数据、console捕获等。这里我们只讲解业务数据的埋点。
    2021-05-05
  • Vue实现菜单切换功能

    Vue实现菜单切换功能

    这篇文章主要为大家详细介绍了Vue实现菜单切换功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • Axios代理配置及封装响应拦截处理方式

    Axios代理配置及封装响应拦截处理方式

    这篇文章主要介绍了Axios代理配置及封装响应拦截处理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 使用vue组件封装共用的组件

    使用vue组件封装共用的组件

    这篇文章主要介绍了使用vue组件封装共用的组件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • Vue利用History记录上一页面的数据方法实例

    Vue利用History记录上一页面的数据方法实例

    这篇文章主要给大家介绍了关于Vue利用History记录上一页面的数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • vant van-list下拉加载更多onload事件问题

    vant van-list下拉加载更多onload事件问题

    这篇文章主要介绍了vant van-list下拉加载更多onload事件问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue3 企业级组件库框架搭建 pnpm monorepo实战示例

    Vue3 企业级组件库框架搭建 pnpm monorepo实战示例

    这篇文章主要为大家介绍了Vue3 企业级组件库框架搭建 pnpm monorepo实战示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • vue cli3中eslint报错no-undef和eslint规则配置方式

    vue cli3中eslint报错no-undef和eslint规则配置方式

    这篇文章主要介绍了vue cli3中eslint报错no-undef和eslint规则配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue与React的区别和优势对比

    Vue与React的区别和优势对比

    这篇文章主要介绍了Vue与React的区别和优势对比,帮助大家更好的选择适合自己的前端框架,迷茫的同学可以进来参考下
    2020-12-12
  • vue-cropper实现裁剪图片

    vue-cropper实现裁剪图片

    这篇文章主要为大家详细介绍了vue-cropper实现裁剪图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05

最新评论