VueJS自定义过滤器:new Vue({filters:{filter1:function(){}....}})
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。
语法
<!-- 在两个大括号中 -->
{{ message | capitalize }} <!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
HTML将字符串转为大写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
{{ message | capitalize}}
</div> <script>
new Vue({
el: '#app',
data: {
message: 'runoob'
},
filters: {
capitalize: function (value) {
if (!value) return '';
value = value.toString();
return value.toUpperCase();
}
}
})
</script>
</body>
</html>
效果：
过滤器可以串联：
{{ message | filterA | filterB }}
过滤器是 JavaScript 函数，因此可以接受参数：
{{ message | filterA('arg1', arg2) }}
VueJS自定义过滤器:new Vue({filters:{filter1:function(){}....}})的更多相关文章
- vuejs自定义过滤器根据搜索框输入的值，筛选复杂的列表数据
如题所示,自定义过滤器根据搜索框输入的值,筛选复杂的列表数据.如图所示: html代码: <input type="text" placeholder="姓名/账号 ...
- VueJs 自定义过滤器使用总结
过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使 ...
- vue.js学习 自定义过滤器使用（1）
在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器.我们参考了一些比较完善的过滤器,比如orderBy 和 filterBy.而且我们可以链式调用过滤器,一个接一个过滤.因此,我们可以定 ...
- vue自定义过滤器的创建和使用
1.简单介绍 过滤器的作用:实现数据的筛选.过滤.格式化. 过滤器的本质是一个有参数,有返回值的方法. 过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...
- VueJs(13)---过滤器
过滤器 过滤器 1.过滤器规则 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方: 双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤 ...
- vue2.0 自定义过滤器（filter）实例
一.过滤器简介 (1)过滤器创建 过滤器的本质 是一个有参数 有返回值的方法 new Vue({ filters:{ myCurrency:function(myInput){ return 处理后的 ...
- Vue自定义过滤器
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...
- vue filters过滤器
vue filters过滤器 vue.js允许我们自定义过滤器,可被使用于一些常见的文本格式化,过滤器可以用在两个地方,双花括号插值和 v-bind表达式.最常见的就是双花括号插值. 比如如下代码:{ ...
- vue.js学习 自定义过滤器使用（2）
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...
随机推荐
- gcc编译生成静态及动态链接库步骤
gcc编译生成静态及动态链接库步骤 这两天在看<Linux C程序设计大全>,吴岳编著,清华大学出版社.这本书是在一个培训机构看到的,在网上查了下该书的相关信息.从目录而言,该书涵盖了Li ...
- Python 错误类型及解决方法
SyntaxError: invalid syntax 表示“语法错误:不正确的语法” 检查代码的缩进,代码格式是否正确,Python的缩进一般为四个空格,tab键尽量不要用. In ...
- Codeforces Round #315 (Div. 2) B 水题强行set
B. Inventory time limit per test 1 second memory limit per test 256 megabytes input standard input o ...
- bzoj 3704 昊昊的机油之GRST 贪心dp，思维
昊昊的机油之GRST Time Limit: 10 Sec Memory Limit: 1024 MBSubmit: 80 Solved: 33[Submit][Status][Discuss] ...
- MySQL不容忽视SQL_MODE的设置
CREATE DATABASE db_test; CREATE TABLE `tb1` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT ...
- js4:with,for in语句，windows，location对象的使用
原文发布时间为:2008-11-08 -- 来源于本人的百度文章 [由搬家工具导入] <html> <head> <title>js</title> & ...
- Java EE学习记录（一）
话说大家都在说java EE,但是java EE的分层结构如下: 1.数据持久层:主要由一些负责操作POJO(Plain Old Java Object)的类构成,主要负责将数据保存进入数据库; 2. ...
- IDEA 2017.3 新版本中创建 JSF Web 应用程序缺少 web.xml 的解决办法
IDEA 2017.3 新版本中默认创建一个 Web 应用程序很可能不会自动创建 web.xml 文件.虽然说从 JavaEE 6.0 开始 Servlet 3.0 规范中就新增了一些注解可以免去传统 ...
- 倒计时器CountDownLatch与同步屏障CyclicBarrier
CountDownLatch CountDownLatch是一个非常实用的多线程控制工具类,这个工具通常用来控制线程等待,它可以让某一个线程等待直到倒计时结束,再开始执行.在这里指CountDownL ...
- hdu 1788(多个数的最小公倍数)
Chinese remainder theorem again Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 ...