Vue 过滤器总结：

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

语法：

1、注册过滤器： Vue.filter(name,callback) 或 new Vue{filters:{}}

2、使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

备注：

1、过滤器也可以接受额外参数、多个过滤器也可以串联

2、并没有改变原本的数据，是产生新的对应的数据

其他：Boot CDN 极兔云 是一个第三方库的网站

下载：Day.js库（Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js)

 案例：

1、效果图：

2、引用的javeScript库：

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

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

3、HTML

<body>

        <!--准备一个容器-->

        <div id="root" style="background-color: rgb(176, 218, 238); padding: 8px;">

            <h2>显示格式化后的时间:</h2>

            <!-- 计算属性实现 -->

            <h3>计算属性实现 : {{fmfTime}}</h3>

            <!-- methods实现 -->

            <h3>methods实现 : {{getFmfTime()}}</h3>

            <!-- 过滤器实现 -->

            <h3>1、局部过滤器实现不带参 ：{{time | timeFormater}}</h3>

            <h3>2、局部过滤器实现带参 : {{time | timeFormater("YYYY年MM月DD日")}}</h3>

            <h3>3、局部过滤器实现串联 : {{time | timeFormater | mySlice}}</h3>

            <h3>4、全局过滤器实现串联 : {{time | timeFormater | mySlice2}}</h3>

        </div>

    </body>

4、javaScript

<script type="text/javascript">

    Vue.config.productionTip = false

    Vue.filter("mySlice2",function(value){

        return value.slice(0,5)

    })//全局过滤器

    new Vue({

        el:"#root",

        data:{

            time:1621561377603//时间戳

        },

        methods:{

            getFmfTime(){

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

            }

        },

        computed:{

            fmfTime(){

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

            }

        },

        filters:{//局部过滤器

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

                return dayjs(value).format(formatStr)

            },

            mySlice(value){

                return value.slice(0,4)

            }

        }

    })

</script>

视频学习：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=39&spm_id_from=pageDriver&vd_source=60a28e8364654bee938864b1d19905ec

第39集

Vue 局部过滤器和全局过滤器的更多相关文章

  1. vue局部过滤器和全局过滤器

    全局过滤器在main.js中写 //注册全局过滤器 Vue.filter('wholeMoneyFormat',(value)=>{   return '￥'+Number(value).toF ...

  2. Vue 项目中添加全局过滤器以及全局混合mixin

    可以在.vue文件中定义局部使用的过滤器 export default{ data(){ return [] }, filters:{ toUpperCase:function(value){ ret ...

  3. Vue过滤器：全局过滤器

    Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化. 过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持). 过滤器应该被添加在 JavaScr ...

  4. Vue 局部组件和全局组件的使用

    <template> <div id="app"> <!--<img alt="Vue logo" src="./ ...

  5. Vue局部组件和全局组件

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. Vue局部注册 或者全局注册 组件时，组件定义要用 分隔命名，用驼峰命名是不生效的

    Vue.component('all-canuse',{ props:['message'], template:'<div>{{message}}</div>' }) 像这样

  7. Vue中全局过滤器期与局部过滤器期的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 黑马vue---28、vue中全局过滤器的基本使用

    黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...

  9. Vue 3 --安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用

    一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...

  10. 第二章 Vue快速入门-- 26 过滤器-定义私有过滤器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. python启动robotframework-ride失败，解决方案

    python启动robotframework-ride提示str(os.path.dirname(rf_file), 'utf-8'))).publish() UnicodeDecodeErro的解决 ...

  2. ElementUI导航连续点击报错

    原因 vue项目中连续多次点击路由, 原因是在路由跳转时不允许同一个路由添加多次 错误解决: 吧vue-router换成3.0版本 import Vue from 'vue' import Route ...

  3. Linux软件安装与进程管理

    Linux软件安装与进程管理 1.软件包分类 首先呢,在学习rpm与yum命令之前,我想先给大家介绍一下Linux软件包的分类,也就是我们常说的安装包,window的软件包是.exe结尾文件,也就是应 ...

  4. SQL SERVER提示pre-login handshake failed错误的一种解决方法。

    昨天在客户那里,遇到一个奇怪的问题.程序直接运行的时候,可以正常连接SQL SERVER; 但是使用Web Service连接SQL SERVER的时候,出现了下面的错误信息: Connection ...

  5. vue中input触发方法中调用ajax，导致input失去焦点问题

    发现在vue中监控input绑定的值,调用方法时,如果方法中有调用后端接口(使用Ajax),会导致input输入框失去焦点,这样导致的问题就是每输入一个字符,就要重新聚焦一次,可通过以下方式在方法中重 ...

  6. CVE-2013-2566 SSL/TLS RC4 信息泄露漏洞 修复方案

    详细描述 安全套接层(Secure Sockets Layer,SSL),一种安全协议,是网景公司(Netscape)在推出Web浏览器首版的同时提出的,目的是为网络通信提供安全及数据完整性.SSL在 ...

  7. mac + win ，用python一行代码批量下载哔哩哔哩视频

    ​ 首先,你的机器已经安装python,然后是安装you-get. 打开终端,输入 pip3 install you-get,回车,即开始安装,如下图所示. ​编辑 安装成功后,比如要下载某个视屏,首 ...

  8. The emulator process for AVD Pixel_4_XL_API_30 was killed 问题

    转载请注明来源:https://www.cnblogs.com/Sherlock-L/p/14946317.html 问题: 因为工作关系接触到了Android Studio,新建了4和11系统的模拟 ...

  9. Laravel ORM 常用方法

    1. 数据查询 ->find($id);  //需要一个主键$id并返回一个模型对象.若不存在则返回null ->findOrFail($id);  //需要一个主键$id并返回一个模型对 ...

  10. python 在路径下创建文件/文本文件 没有路径自动创建

    1.一般在执行文件的同级目录下创建一个文本文件: file = open("1.txt", "w", encoding="utf8") # ...