VueJs(13)---过滤器
过滤器
过滤器
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()
参考:
想太多,做太少,中间的落差就是烦恼。想没有烦恼,要么别想,要么多做。上尉【2】
VueJs(13)---过滤器的更多相关文章
- VueJs 自定义过滤器使用总结
过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使 ...
- vuejs自定义过滤器根据搜索框输入的值,筛选复杂的列表数据
如题所示,自定义过滤器根据搜索框输入的值,筛选复杂的列表数据.如图所示: html代码: <input type="text" placeholder="姓名/账号 ...
- VueJS自定义过滤器:new Vue({filters:{filter1:function(){}....}})
Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化. 语法 <!-- 在两个大括号中 --> {{ message | capitalize }} <!-- 在 v-bin ...
- vuejs点滴
博客0.没事的时候可以看的一些博客:https://segmentfault.com/a/1190000005832164 http://www.tuicool.com/articles/vQBbii ...
- vue.js学习 自定义过滤器使用(1)
在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器.我们参考了一些比较完善的过滤器,比如orderBy 和 filterBy.而且我们可以链式调用过滤器,一个接一个过滤.因此,我们可以定 ...
- angularJs
学了差不多一个礼拜,感觉这个库还是很不错的,在应用中一些小笔记,其实这些笔记现在来看确实很基础,但是把这个博客当成我自己的一个记录历程,所以我也把这点笔记拿上来: 1.是一个js框架,是一个以js语言 ...
- angular(常识)
我觉得angularjs是前端框架,而jquery只是前端工具,这两个还是没有可比性的. 看知乎上关于jquery和angular的对比http://www.zhihu.com/question/27 ...
- SVG 参考手册
1. SVG元素模块 Animation.Module animate animateColor animateTransform animateMotion set mpath 剪裁模块 clipP ...
- JavaWeb学习计划
1 HTML2 CSS3 JavaScript4 XML5 Tomcat6 Servlet7 HTTP8 Cookie Session9 JSP10 JSTL11 MySQL12 JDBC13 过滤器 ...
随机推荐
- 图数据库-Neo4j使用
Cypher 查询语言简单使用 3.1.基本语法 Node语法: Cypher使用一对圆括号来表示一个节点:提供了多种格式如下: () 匿名节点 (matrix) 为节点添加一个ID (:Movie ...
- 聚类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 ...
- 在anguler项目中引用fullCalendar
1.css文件引用 <link href="/CSS/Fullcalendar.css" rel="stylesheet" /> <!--插件 ...
- Ubuntu搭建Anki服务器
Ubuntu搭建Anki服务器 第一步安装Anki 阿里云的服务器,xshell远程登录上 #以root用户进行操作 #安装Akni服务 easy_install AnkiServer #添加名为an ...
- GitHub上最受欢迎的 5 大 Java 项目
1. Mockito Mockito 并不是无酒精混合饮料的意思.Mockito 是一个针对 Java 的 mocking 框架.它与 EasyMock 和jMock 很相似,但是通过在执行后校验什么 ...
- SFTP文件服务器的搭建
由于公司项目的需要,需要自己搭建一个SFTP文件服务器,来实现不同IP服务器之间文件的传输: 应用的场景:由于需要缓解服务器的压力,需要对服务进分离,分别放置在不同IP服务器上: 首先提供一个SFTP ...
- Core Expression
https://docs.oracle.com/cd/E12058_01/doc/doc.1014/e12030/cron_expressions.htm A Cron Expressions Cro ...
- 关于IO的整理
我们知道io只是输入输出,在java语言中分为同步阻塞的BIO.同步非阻塞的NIO.异步非阻塞的AIO,现在的IO,一般是用作两种用途:一种是进行文件或者目录的操作(将不同的输入输出源抽象成流,所以流 ...
- QEMU KVM libvirt手册(2): monitor
Administrating Virtual Machines with QEMU Monitor When QEMU is running, a monitor console is provide ...
- Jenkins初级使用过程中的异常处理(1)
在使用Jenkins一些基本功能的时候,或者说是基本插件的时候,会遇到各种各样的报错.这里就设想模拟一下,重现一下以前遇到过的问题,记录一下.虽说是Jenkins使用过程中出现这样的问题,但实际上可以 ...