vue-过滤器filter

vue的过滤器一般在JavaScript 表达式的尾部,由“|”符号指示:

过滤器可以让我们的代码更加优美,一般可以用在时间格式化,首字母大写等等。

例如:{{ date | dateFormat }}这是过滤器的写法;{{ dateFormat(date) }}这是函数调用的写法

可以看出过滤器的写法更加语义化,让人一眼可以看出它的含义。

<!-- 在双花括号中 -->
{{ message | capitalize }} <!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div> <!-- 也可以串联多个过滤器 -->
{{ message | filterA | filterB }}
// 在这个例子中,filterA 被定义为接收单个参数的过滤器函数,表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB,将 filterA 的结果传递到 filterB 中 <!-- 过滤器接收参数 -->
{{ message | capitalize('string', obj) }}
// 这里的参数将在过滤器函数内以第二个参数开始算起第一个参数为要过滤的值message,即'string'为第二个参数,obj为第三个参数。

过滤器方法在接收到参数后,你可以在方法内进行一系列的处理,最终return出处理结果即可。

1、过滤器可以是组件内的

filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}

2、过滤器也可以是挂载在全局Vue里

Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})

vue-过滤器filter的更多相关文章

  1. vue - 过滤器filter的基本使用

    1.全局过滤器 输出: 过滤器可以多次来调用 输出: 2.私有过滤器 <!DOCTYPE html> <html lang="en"> <head&g ...

  2. vue 过滤器filter的详解

    1.代码运用的地方 <!-- 在双花括号中 --> {{ date | formatDate}} <!-- 在 `v-bind` 中 --> <div v-bind:id ...

  3. Vue 过滤器 Filter传递参数

    给日期类型过滤器设置不同格式 dayjs是一款轻量级的日期操作库 https://day.js.org/en import Vue from 'vue' import dayjs from 'dayj ...

  4. vue 过滤器 filter 的使用

    1.局部过滤器的使用 比如性别,订单状态的数据,后端一般返回数字来代替状态.以性别为模拟数据,0是未知,1是男,2是女. 直接数据渲染出来,只有012,没有性别 根据后端返回的int类型值,前端对数据 ...

  5. vue的过滤器filter

    前记: 排版记录,未免太耽误时间,我就简单的来,下面是一个vue 过滤器的写法,demo 演示,限制一个字符串的长度. vue filter 的官网介绍 https://cn.vuejs.org/v2 ...

  6. vue 过滤器filters的使用以及常见报错小坑(Failed to resolve filter)

    今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...

  7. Vue - 过滤器

    1.内部过滤器 1):字母操作: ---- 针对字符串 A:capitalize B:uppercase C:lowercase 2):json过ingfy滤器,可将表达式的值转化为Json字符串,本 ...

  8. Vue 过滤器的使用

    Vue官方文档是这样说的:Vue过滤器用于格式化一些常见的文本. 在实际项目中的使用: 定义过滤器 在src定义一个filter.js文件,里面定义过滤器函数,在最后要使用 exprot defaul ...

  9. vue过滤器微信小程序过滤器和百度智能小程序过滤器

    因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们. 1. 微信小程序过滤器: 1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面. ...

  10. 换个角度使用VUE过滤器

    换个角度使用VUE过滤器 过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作.官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已.但最近在做两款APP时,遇到一些特殊的需求. ...

随机推荐

  1. css实现隐藏多余溢出文字并显示省略号

    <meta charset="utf-8" /> <style> .txt{ width:200px; border:1px solid #ddd; ove ...

  2. Ubuntu下利用Apache转发模块实现反向代理

    Apache的反向代理主要利用转发模块,proxy和proxy_http 先配置 Apache 支持proxy 和 proxy_http 在Ubuntu系统下,Apache的配置文件在目录/etc/a ...

  3. HDU 6035(树形dp)

    题意略. 思路:有n * (n - 1) / 2这么多边,要枚举是不可能的,感觉和数据结构也沾不上边.再加上树上染色,以一条边上不同颜色作为这个边的值,这看起来像是算贡献那种题,和17icpc沈阳的某 ...

  4. 速卖通AE平台+聚石塔+奇门 完整教程V2

    公司是跨境电商,在阿里马马的速卖通平台上开有店铺,并且基于速卖通开放平台,自主研发了ERP系统,居今已有3年多的时间了,一直很稳定. 今年初,速卖通AE开放平台改版,并入淘宝开放平台中,我们的麻烦就开 ...

  5. C#实现七牛云存储

    云存储,就是把本地的资源文件存放至网络上,可以公网访问.相当于网盘功能,感觉非常方便. 这里介绍的是七牛云存储.有兴趣的可以去官方网站详看 根据官网的介绍,本身是提供SDK的,下载地址,大家可以根据自 ...

  6. 一个例子理解break和continue的区别

    结论:break用于终止整个循环,而continue用于终止某一次循环.public class Test { public static void main(String[] args) { for ...

  7. 【netty这点事儿】ByteBuf 的使用模式

    堆缓冲区 最常用的 ByteBuf 模式是将数据存储在 JVM 的堆空间中. 这种模式被称为支撑数组(backing array), 它能在没有使用池化的情况下提供快速的分配和释放. 直接缓冲区 直接 ...

  8. Linux 格式化和挂载数据盘

    如果您已经为 ECS 实例配了数据盘,您需要先格式化数据盘并挂载文件系统后才能正常使用数据盘. 注意: 磁盘分区和格式化是高风险行为,请慎重操作.本文档描述如何处理一个新买的数据盘,如果您的数据盘上有 ...

  9. (转载)SVM-基础(三)

    支持向量机: Kernel  by pluskid, on 2010-09-11, in Machine Learning     70 comments 本文是"支持向量机系列" ...

  10. TCP/IP卷一没提到的策略路由

    策略路由 tcp/ip书上介绍了选路和动态路由,没有提及策略路由,应该是因为那个年代还不存在策略路由吧,但是这是个很有用的东西. 背景 昨天领导做了一个虚拟机,里面配了两个网络172.16.50.33 ...