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)全局方 ...
随机推荐
- BZOJ3531 [Sdoi2014]旅行 【树剖 + 线段树】
题目 S国有N个城市,编号从1到N.城市间用N-1条双向道路连接,满足 从一个城市出发可以到达其它所有城市.每个城市信仰不同的宗教,如飞天面条神教.隐形独角兽教.绝地教都是常见的信仰.为了方便,我们用 ...
- 配置ubuntu16.04下Theano使用GPU运行程序的环境
ubuntu16.04默认安装了python2.7和python3.5 .本教程使用python3.5 第一步:将ubuntu16.04默认的python2修改成默认使用python3 . sudo ...
- 急速安装Ubuntu/windows双操作系统
本文出自:http://www.cnblogs.com/svitter FAQ 因为很多人都不看FAQ,比如像我,所以直接把FAQ写在最前面,然后把正文卸载最后面逼你看- - 常用软件下载(官网) d ...
- Vue实现增删改查功能
简单的表单CURD功能demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- Docker(二)：Docker的用途
Docker的优点: 1.Docker容器的启动可以在秒级实现,相比传统虚拟机方式快的多. 2.Docker资源利用率很高,一台主机上可以同时运行数千个Docker容器. 3.容器除了运行其中应用外, ...
- Codeforces 935D Fafa and Ancient Alphabet
题目链接 题意 给定两个\(n\)位的\(m\)进制数\(s1,s2\),所有出现的\(0\)均可等概率地被其他数字替换,求\(s1\gt s2\)的概率. 思路 从高位到低位,根据每一位上相应的\( ...
- 【Linux】自主实现my_sleep【转】
转自:http://blog.csdn.net/scenlyf/article/details/52068522 版权声明:本文为博主原创文章,未经博主允许不得转载. 首先说一下信号相关的内容. ** ...
- ubuntu下使用OBS开斗鱼直播
系统环境:ubuntu 15.10,OBS Studio 0.13.1 OBS是可以在linux,windows,mac下直播的开源软件,官方地址:https://obsproject.com/ 斗鱼 ...
- 静态变量(static)的特点
静态变量(static):有局部变量,也有全局变量. 静态局部变量:在函数体内用static说明的变量称为静态局部变量,属于静态类别. 特点: (1)它占据一个永久性的存储单元.随着文件的存在而存在. ...
- LeetCode OJ-- Remove Nth Node From End of List
https://oj.leetcode.com/problems/remove-nth-node-from-end-of-list/ remove倒数第n个节点 一般list remove node的 ...