Vue.Js 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果

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的过滤器的更多相关文章

  1. Vue自定义过滤器

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...

  2. vue filter过滤器简单应用

    vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...

  3. vue filters过滤器

    vue filters过滤器 vue.js允许我们自定义过滤器,可被使用于一些常见的文本格式化,过滤器可以用在两个地方,双花括号插值和 v-bind表达式.最常见的就是双花括号插值. 比如如下代码:{ ...

  4. vue自定义过滤器的创建和使用

    1.简单介绍   过滤器的作用:实现数据的筛选.过滤.格式化.   过滤器的本质是一个有参数,有返回值的方法.   过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...

  5. VUE:过滤器及日期格式化moment库

    VUE:过滤器及日期格式化moment库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  6. VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符

    过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...

  7. 六、vue基础--过滤器定义

    七.过滤器定义 1.使用:{{username|strip}}.<a :href="url|strip">百度</a> 2.定义:都是定义一个函数,这个函数 ...

  8. vue 时间过滤器

    过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理).语法:1.注册过滤器: Vue.filter(name ,callback)或new Vue{filters:{}}2. ...

  9. vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

随机推荐

  1. uva-10098

    所有的排列,但是要不重复 #include<stdio.h> #include<iostream> #include<sstream> #include<qu ...

  2. IPv4检验和计算

    IP分组中的检验和仅覆盖首部,而不管数据,首部被划分为16位的段,把所有段相加,结果取反,塞进首部检验和里 在目的主机中,首部划分为16位,相加,结果肯定是16个1,然后取反,结果为0.如下 在目的主 ...

  3. svn+apache快速安装

    1.[安装基本软件包],  yum -y install httpd subversion mod_dav_svn 2.[验证svn安装是否成功及httpd 的mod_dav模块是否加载] svn - ...

  4. MacBook Pro 一月使用体验

    从 2013 年开始,就特别想买 MBP,终于在 2015 年的尾巴用上了 MBPR.原本是要在使用一周后写一份使用体验的,但因为懒,现在拖到一个月了,刚好现在也是2016年的一月,就把标题改成一月使 ...

  5. 高负载均衡学习haproxy之安装与配置

    https://www.cnblogs.com/ilanni/p/4750081.html

  6. 1.JSONObject与JSONArray的使用

    参考文献: http://blog.csdn.net/huangwuyi/article/details/5412500 1.JAR包简介 要使程序可以运行必须引入JSON-lib包,JSON-lib ...

  7. 使用seaborn制图(箱型图)

    import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns # 设置风格, ...

  8. margin-top和padding-top

    padding- top 在原有的基础上进一步的扩张 margin - top 在原有的位置上发生上下的平移 <!DOCTYPE html> <html lang="en& ...

  9. Spring MVC 支持的原生API参数

    HttpServletRequest HttpServletResponse HttpSession java.security.Principal Local InputStream OutputS ...

  10. as3 air 保存文本内容的换行

    private function newData() { var str:String="<root>"; for(var i in charCode_arr) { s ...