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. InnoDB 中不同SQL语句设置的锁

    锁定读.UPDATE 或 DELETE 通常会给在SQL语句处理过程扫描到的每个索引记录上设置记录锁.语句中是否存在排除该行的WHERE条件并不重要.InnoDB不记得确切的WHERE条件,但只知道哪 ...

  2. Taurus.MVC WebAPI 入门开发教程3：路由类型和路由映射。

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

  3. MyBatis-知识点详解

    Mybatis 中$与#的区别 1 #是将传入的值当做字符串的形式,eg:select id,name,age from student where id =#{id},当前端把id值1,传入到后台的 ...

  4. Docker 09 可视化

    参考源 https://www.bilibili.com/video/BV1og4y1q7M4?spm_id_from=333.999.0.0 https://www.bilibili.com/vid ...

  5. 论文翻译：2021_A New Real-Time Noise Suppression Algorithm for Far-Field Speech Communication Based on Recurrent Neural Network

    论文地址:一种新的基于循环神经网络的远场语音通信实时噪声抑制算法 引用格式:Chen B, Zhou Y, Ma Y, et al. A New Real-Time Noise Suppression ...

  6. Crash的数字表格 （莫比乌斯反演）

    Crash的数字表格 Description 今天的数学课上,Crash小朋友学习了最小公倍数(Least Common Multiple).对于两个正整数a和b,LCM(a, b)表示能同时被a和b ...

  7. springboot配置（yami配置文件，JSR303数据校验，多环境配置）

    yami配置文件 YAML是 "YAML Ain't a Markup Language" (YAML不是一种标记语言)的递归缩写.在开发的这种语言时,YAML 的意思其实是:&q ...

  8. 浅析websocket的基本应用spring boot + vue +C# + WPF

    1.基本概念 首先websocket是基于H5的一种通信.在网页中如果定时获取服务器端的实时数据,我们常采用long poll 和ajax轮询的方式.但是在轮询过程中,由于根本没有新数据的改变,而造成 ...

  9. 01_Django-介绍-项目结构-URL和视图函数

    01_Django-介绍-项目结构-URL和视图函数 视频:https://www.bilibili.com/video/BV1vK4y1o7jH 博客:https://blog.csdn.net/c ...

  10. python超多常用知识记录

    在函数传参给变量**a,可以接收字典类型,当未传参默认空字典 set创建集合可以排重 while和for到参数未满足可以增加else cmp函数比较长度 divmod函数返回除数和余数结果 nonlo ...