过滤器

过滤器

1、过滤器规则

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:

双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:

<!-- 在双花括号中 -->
{{ message | capitalize }} <!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

你可以在一个组件的选项中定义本地的过滤器:

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

或者在创建 Vue 实例之前全局定义过滤器:

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

下面这个例子用到了 capitalize 过滤器:发现首字母大写

capitalize 过滤器函数将会收到 message 的值作为第一个参数。

2、过滤器可以串联:

{{ message | filterA | filterB }}

这就相当于:

第一步:先把message放到filterA过滤器中进行过滤

第二步:将第一步过滤器的结果再放到filterB再进行过滤,显示最终过滤结果。

3、过滤器是 JavaScript 函数,因此可以接收参数:

{{ message | filterA('arg1', arg2) }}

这里,filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数,普通字符串 'arg1' 作为第二个参数,表达式 arg2 的值作为第三个参数。

小案例

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<span>SearchByName: </span>
<input v-model="searchQuery">
<table>
<thead>
<tr>
<td v-for="col in columns">{{col|capitalize}}</td>
</tr>
</thead>
<tbody>
<tr v-for="entry in filteredData">
<td v-for="col in columns">{{entry[col]}}</td>
</tr>
</tbody>
</table>
</div> <script>
new Vue({
el: '#app',
data: {
searchQuery: '',
columns: ['name', 'gender', 'age'],
data: [{
name: 'Jack',
gender: 'male',
age: 26
}, {
name: 'John',
gender: 'female',
age: 20
}, {
name: 'Lucy',
gender: 'female',
age: 16
}]
},
filters: {
capitalize: function(value) {
return value.charAt(0).toUpperCase() + value.slice(1);
}
},
computed: {
filteredData: function() {
var self = this;
//filter是Javascript带的方法,
// 前面调用的是需要使用filter的数组类型,而给filter函数传入的是数组中的每个item,也就是说filter里面的函数,是每个item要去做的,并将每个结果返回。
return this.data.filter(function(item) {
return item.name.toLowerCase().indexOf(self.searchQuery.toLowerCase()) !== -1;
})
}
}
});
</script>

效果:

使用js中的迭代函数filter :

其他的一些Js 迭代方法——filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()

参考:

链接:vue filter的几种用法

想太多,做太少,中间的落差就是烦恼。想没有烦恼,要么别想,要么多做。上尉【2】

VueJs(13)---过滤器的更多相关文章

  1. VueJs 自定义过滤器使用总结

    过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使 ...

  2. vuejs自定义过滤器根据搜索框输入的值,筛选复杂的列表数据

    如题所示,自定义过滤器根据搜索框输入的值,筛选复杂的列表数据.如图所示: html代码: <input type="text" placeholder="姓名/账号 ...

  3. VueJS自定义过滤器:new Vue({filters:{filter1:function(){}....}})

    Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化. 语法 <!-- 在两个大括号中 --> {{ message | capitalize }} <!-- 在 v-bin ...

  4. vuejs点滴

    博客0.没事的时候可以看的一些博客:https://segmentfault.com/a/1190000005832164 http://www.tuicool.com/articles/vQBbii ...

  5. vue.js学习 自定义过滤器使用(1)

    在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器.我们参考了一些比较完善的过滤器,比如orderBy 和 filterBy.而且我们可以链式调用过滤器,一个接一个过滤.因此,我们可以定 ...

  6. angularJs

    学了差不多一个礼拜,感觉这个库还是很不错的,在应用中一些小笔记,其实这些笔记现在来看确实很基础,但是把这个博客当成我自己的一个记录历程,所以我也把这点笔记拿上来: 1.是一个js框架,是一个以js语言 ...

  7. angular(常识)

    我觉得angularjs是前端框架,而jquery只是前端工具,这两个还是没有可比性的. 看知乎上关于jquery和angular的对比http://www.zhihu.com/question/27 ...

  8. SVG 参考手册

    1. SVG元素模块 Animation.Module animate animateColor animateTransform animateMotion set mpath 剪裁模块 clipP ...

  9. JavaWeb学习计划

    1 HTML2 CSS3 JavaScript4 XML5 Tomcat6 Servlet7 HTTP8 Cookie Session9 JSP10 JSTL11 MySQL12 JDBC13 过滤器 ...

随机推荐

  1. 图数据库-Neo4j使用

    Cypher 查询语言简单使用 3.1.基本语法 Node语法: Cypher使用一对圆括号来表示一个节点:提供了多种格式如下: () 匿名节点 (matrix)  为节点添加一个ID (:Movie ...

  2. 聚类K-Means

    import numpy as np x=np.random.randint(0,52,52) x k=3 y=np.zeros(20) y array([ 0., 0., 0., 0., 0., 0 ...

  3. 在anguler项目中引用fullCalendar

    1.css文件引用 <link href="/CSS/Fullcalendar.css" rel="stylesheet" /> <!--插件 ...

  4. Ubuntu搭建Anki服务器

    Ubuntu搭建Anki服务器 第一步安装Anki 阿里云的服务器,xshell远程登录上 #以root用户进行操作 #安装Akni服务 easy_install AnkiServer #添加名为an ...

  5. GitHub上最受欢迎的 5 大 Java 项目

    1. Mockito Mockito 并不是无酒精混合饮料的意思.Mockito 是一个针对 Java 的 mocking 框架.它与 EasyMock 和jMock 很相似,但是通过在执行后校验什么 ...

  6. SFTP文件服务器的搭建

    由于公司项目的需要,需要自己搭建一个SFTP文件服务器,来实现不同IP服务器之间文件的传输: 应用的场景:由于需要缓解服务器的压力,需要对服务进分离,分别放置在不同IP服务器上: 首先提供一个SFTP ...

  7. Core Expression

    https://docs.oracle.com/cd/E12058_01/doc/doc.1014/e12030/cron_expressions.htm A Cron Expressions Cro ...

  8. 关于IO的整理

    我们知道io只是输入输出,在java语言中分为同步阻塞的BIO.同步非阻塞的NIO.异步非阻塞的AIO,现在的IO,一般是用作两种用途:一种是进行文件或者目录的操作(将不同的输入输出源抽象成流,所以流 ...

  9. QEMU KVM libvirt手册(2): monitor

    Administrating Virtual Machines with QEMU Monitor When QEMU is running, a monitor console is provide ...

  10. Jenkins初级使用过程中的异常处理(1)

    在使用Jenkins一些基本功能的时候,或者说是基本插件的时候,会遇到各种各样的报错.这里就设想模拟一下,重现一下以前遇到过的问题,记录一下.虽说是Jenkins使用过程中出现这样的问题,但实际上可以 ...