1、过滤器

1.1 概念

过滤器：

  • 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
  • 语法：
    1、注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
    2、使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

备注：

  • 1、过滤器也可以接收额外参数、多个过滤器也可以串联
  • 2、并没有改变原本的数据, 是产生新的对应的数据

1.2 代码实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>标题</title>

    <!-- 引入vue -->

    <script type="text/javascript" src="../js/vue.js"></script>

    <script type="text/javascript" src="../js/dayjs.min.js"></script>

</head>

<body>

    <div id="App">

        <h1>格式化后的时间</h1>

        <h2>现在是（计算属性实现）:{{formatTime}}</h2><br />

        <h2>现在是（method实现）:{{getformatTime()}}</h2><br />

        <h2>现在是（过滤器实现）:{{time | timeFormater}}</h2><br />

        <h2>现在是（过滤器实现同时传参）:{{time | timeFormater('YYYY-MM-DD')}}</h2><br />

        <h2>现在是（过滤器实现同时传参（多个过滤器的联合使用））:{{time | timeFormater('YYYY-MM-DD') | mySlice}}</h2><br />

    </div>

    <script type="text/javascript">

        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //全局过滤器

        Vue.filter('mySlice', function (value) {

            return value.slice(0, 4)

        })

        //创建Vue实例

        new Vue({

            el: '#App',

            data: {

                value: "Vue",

                time: 1658153149000, //时间戳

            },

            methods: {

                getformatTime() {

                    return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')

                }

            },

            computed: {

                formatTime() {

                    return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')

                }

            },

            filters: {

                timeFormater(value, str = "YYYY年MM月DD日 HH:mm:ss") {

                    return dayjs(value).format(str)

                }

            }

        })

    </script>

</body>

</html>

1.3 测试效果


Vue学习之--------Vue中过滤器(filters)的使用（代码实现）（2022/7/18）的更多相关文章

  1. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  2. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  3. Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  4. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  5. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  6. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  7. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  8. Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

  9. vue中过滤器filters的使用

    组件内写法 filters:{ filter:function(data,arg1,arg2){ return .... } } 全局写法 filters('filter',function(data ...

随机推荐

  1. 43%非常看好TypeScript…解读“2022前端开发者现状报告”

    摘要:近日,The Software House 发布了"2022前端开发者现状报告",笔者在此对报告内容进行解读,供大家参考. 本文分享自华为云社区<"2022前 ...

  2. 基于vue2.0原理-自己实现MVVM框架之computed计算属性

    基于上一篇data的双向绑定,这一篇来聊聊computed的实现原理及自己实现计算属性. 一.先聊下Computed的用法 写一个最简单的小demo,展示用户的名字和年龄,代码如下: <body ...

  3. ApacheCon 首次亚洲大会 —— Incubator 专场介绍

    Apache 孵化器即为想要进入 Apache 软件基金会(ASF)的项目提供相关帮助和服务.它帮助进入的项目(称为"podling")采用 Apache 的治理风格,并引导使用 ...

  4. Taurus.MVC WebAPI 入门开发教程5：控制器安全校验属性【HttpGet、HttpPost】【Ack】【Token】【MicroService】。

    系列目录 1.Taurus.MVC WebAPI  入门开发教程1:框架下载环境配置与运行. 2.Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World. 3.Tau ...

  5. Apache HttpClient 5 使用详细教程

    点赞再看,动力无限. 微信搜「程序猿阿朗 」. 本文 Github.com/niumoo/JavaNotes 和 未读代码博客 已经收录,有很多知识点和系列文章. 超文本传输协议(HTTP)可能是当今 ...

  6. 三道MySQL联合索引面试题，淘汰80%的面试者，你能答对几道

    众所周知MySQL联合索引遵循最左前缀匹配原则,在少数情况下也会不遵循(有兴趣,可以翻一下上篇文章). 创建联合索引的时候,建议优先把区分度高的字段放在第一列. 至于怎么统计区分度,可以按照下面这种方 ...

  7. C++ 性能小测 1 二维数组的遍历效率

    C++ 性能小测 1 二维数组的遍历效率 遍历二维数组时,常规思路是使用一个嵌套循环.一方面,由于 CPU 使用了分支预测技术,因此通常将循环次数最多循环的放在最内层.另一方面,由于二维数组是按行存储 ...

  8. 虚拟机里做LUN映射（RHEL系统和centos系统皆可）（Linux版）

    紧接着Windows的LUN映射之后 参考 (https://www.cnblogs.com/zhengyan6/p/16121268.html) 先删除部分配置(没有做之前的LUN映射则不用) 进网 ...

  9. 面试突击80：说一下 Spring 中 Bean 的生命周期？

    Java 中的公共类称之为 Bean 或 Java Bean,而 Spring 中的 Bean 指的是将对象的生命周期,交个 Spring IoC 容器来管理的对象.所以 Spring 中的 Bean ...

  10. vue简单的请求api并渲染到表格

    环境 vue3.11 组件库 https://element-plus.gitee.io/#/zh-CN 开始 初始化一个项目 App.vue <template> <div> ...