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. MySQL之COUNT(*)性能到底如何？

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. GreatSQL是MySQL的国产分支版本,使用上与MySQL一致. 前言 在实际开发过程中,统计一个表的数据量是经常遇到 ...

  2. GreatSQL FAQ

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 目录 0. GreatSQL简介 1. GreatSQL的特色有哪些 2. GreatSQL在哪里可以下载 二进制包.RP ...

  3. MyBatis-Plus（二、常用注解）

    1.@TableName @TableName 用法:映射数据库的表名,如果数据库表名与实体类名不一致,用@TableName来映射. package com.example.mybatisplus. ...

  4. Python 工匠：一个关于模块的小故事

    前言 模块(Module)是我们用来组织 Python 代码的基本单位.很多功能强大的复杂站点,都由成百上千个独立模块共同组成. 虽然模块有着不可替代的用处,但它有时也会给我们带来麻烦.比如,当你接手 ...

  5. 【读书笔记】15《The Bridge of Madison County》

    廊桥遗梦(梅丽尔·斯特里普主演) 罗伯特·詹姆斯·沃勒 99个笔记 The Beginning   美[|diˈklainz]v 辞谢,谢绝(邀请等)( decline的第三人称单数 );(道路.物体 ...

  6. Gitea 与 Jenkins 的集成实践，打造你的专属 CI/CD 系统

    前言 Gitea 是一个用于代码托管的轻量级单体程序,它能与现有的经典应用集成,诸如代码分析工具 SonarQube.持续集成工具 Drone.Jenkins 以及用于工单管理的客户端插件(VSCod ...

  7. opencv videocapture

    import time import cv2 import numpy as np from os import path import pickle ''' 关于camera id 此处需要稍微说几 ...

  8. 我的 Kafka 旅程 - Linux下的安装 & 基础命令

    准备工作 安装解压缩工具 tar # 检查是否安装了解压缩工具 tar yum list tar # 如未安装 tar yum install tar -y 安装必备的 java # 检查是否安装了 ...

  9. （二）JPA 连接工厂、主键生成策略、DDL自动更新

    (一)JPA的快速入门 2.JPA连接工厂 通过之前的 代码 实现已经清楚的发现了整个的JPA实现步骤,但是这个步骤似乎有一些繁琐了,毕竟最终所关心的一定是EntityManager对象实例,而要想获 ...

  10. 通过管理接口配置ProxySQL

    可以使用mysql客户端来连接管理接口,以下是使用admin凭据连接到本地6032端口的管理接口: $ mysql -u admin -padmin -h 127.0.0.1 -P6032 --pro ...