Vue过滤器filters使用详解

这次给大家带来Vue过滤器filters使用详解,Vue过滤器filters使用的注意事项有哪些,下面就是实战案例,一起来看一下。

示例代码

采用vue单文件组件,使用moment插件格式化日期

 

{{date | dateFormat}}

import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { data() { return { date: new Date() } }, filters: { dateFormat(val) { return moment(val).calendar(); } } }

登录后复制

说明

过滤器内是没有this引用的,过滤器内的this是undefined,所以不要在过滤器内尝试使用this引用组件实例的变量或者方法。

ps:下面看下Vue 过滤器的基本用法

// 注册Vue.filter('my-filter', function (value) { // 返回处理后的值})// getter,返回已注册的过滤器var myFilter = Vue.filter('my-filter')//在mustache中使用{{ msg | uppercase }}

登录后复制

//在标签中使用

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

怎样让Angular里的集合数据遍历显示

vue.js如何使用mint-ui轮播组件

以上就是Vue过滤器filters使用详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2772880.html

(0)
上一篇 2025年3月8日 13:34:23
下一篇 2025年3月8日 13:34:27

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • laydate.js日期插件使用详解

    这次给大家带来laydate.js日期插件使用详解,使用laydate.js日期插件的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 laydate.js经过贤心大大的重写之后功能越来越强大,用起来也愈渐灵活了,大家都知道。Angu…

    编程技术 2025年3月8日
    200
  • vue+element实现表格分页的步奏详解

    这次给大家带来vue+element实现表格分页的步奏详解,vue+element实现表格分页的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 ElementUI是饿了么前端开源的一个基于Vue的前端框架,已经帮我们封装好了一系列功…

    编程技术 2025年3月8日
    200
  • zTree的树形菜单使用步奏详解

    这次给大家带来zTree的树形菜单使用步奏详解,zTree树形菜单使用的注意事项有哪些,下面就是实战案例,一起来看一下。 在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号 第一步:在页面显示菜单位置,添加 …

    编程技术 2025年3月8日
    200
  • JS实现单例模式的步奏详解

    这次给大家带来JS实现单例模式的步奏详解,JS实现单例模式的注意事项有哪些,下面就是实战案例,一起来看一下。 传统单例模式 保证一个类仅有一个实例,并提供一个访问它的全局访问点。 实现单例核心思想 无非是用一个变量来标志当前是否已经为某个类…

    编程技术 2025年3月8日
    200
  • 在Angular2里去除url中#号的操作详解

    这次给大家带来在Angular2里去除url中#号的操作详解,在Angular2里去除url中#号的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 本文中主要介绍了关于Angular2+中去除url中#号的相关内容,这是最近在工作中…

    编程技术 2025年3月8日
    200
  • axios使用步骤详解(附代码)

    这次给大家带来axios使用步骤详解(附代码),使用axios的注意事项有哪些,下面就是实战案例,一起来看一下。 Axios是一个基于Promise的 HTTP 库,可以用在浏览器和node.js 中,因为尤大大的推荐,axios也变得越来…

    编程技术 2025年3月8日
    200
  • gulp安装+打包+合并最详解

    这次给大家带来gulp安装+打包+合并最详解,使用gulp安装+打包+合并的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发…

    编程技术 2025年3月8日
    200
  • Emergence.js插件的使用详解

    这次给大家带来Emergence.js插件的使用详解,Emergence.js插件使用的注意事项有哪些,下面就是实战案例,一起来看一下。 Emergence.js 是一个轻量级,高性能的 JS 插件,用于检测和操作浏览器中的元素。 这个插件…

    编程技术 2025年3月8日
    200
  • Vue2.0设置全局样式步奏详解

    这次给大家带来Vue2.0设置全局样式步奏详解,Vue2.0设置全局样式的步奏详解的注意事项有哪些,下面就是实战案例,一起来看一下。 为Vue设置全局样式需要几个步骤(如果是sass将less改成sass即可) 第一步:在src目录下的ma…

    编程技术 2025年3月8日
    200
  • Node的模块系统使用详解

    这次给大家带来Node的模块系统使用详解,Node模块系统使用的注意事项有哪些,下面就是实战案例,一起来看一下。 模块是构建应用程序的基础,也使得函数和变量私有化,不直接对外暴露出来,接下来我们就要介绍Node的模块化系统和它最常用的模式 …

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论