vue自定义过滤器的创建与使用
过滤器：生活中有很多例子，净水器 空气净化器 。
过滤器的作用：实现数据的筛选、过滤、格式化。
vue1.*版本是有内置的过滤器，但是在vue2.*所有的版本都已经没有自带的过滤器了。
1、过滤器创建
过滤器的本质 是一个有参数 有返回值的方法
new Vue({
filters:{
myCurrency:function(myInput){
return 处理后的数据
}
}
})
2、过滤器使用
语法：
<any>{{表达式 | 过滤器}}</any>
举个例子：
<h1>{{price | myCurrency}}</h1>
3、过滤器高级用法
在使用过滤器的时候，还可以指定参数，来告诉过滤器按照参数进行数据的过滤。
①如何给过滤器传参？
<h1>{{price | myCurrency('￥',true)}}</h1>
②如何在过滤器中接收到？
new Vue({
filters:{
//myInput是通过管道传来的数据
//arg1在调用过滤器时在圆括号中第一个参数
//arg2在调用过滤器时在圆括号中第二个参数
myCurrency:function(myInput,arg1,arg2){
return 处理后的数据
}
}
})
示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body> <div id="container">
<p>{{msg}}</p>
<h1>{{price}}</h1>
<h1>{{price | myCurrency('￥')}}</h1>
</div> <script>
// filter
new Vue({
el: '#container',
data: {
msg: 'Hello Vue',
price:356
},
//过滤器的本质 就是一个有参数有返回值的方法
filters:{
myCurrency:function(myInput,arg1){
console.log(arg1);
//根据业务需要，对传来的数据进行处理
// 并返回处理后的结果
var result = arg1+myInput;
return result;
}
}
})
</script> </body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body> <div id="container">
<p>{{msg}}</p>
<h1>{{name | myTextTransform(false)}}</h1>
</div> <script>
new Vue({
el: '#container',
data: {
msg: 'Hello Vue',
name:'Michael'
},
filters:{
myTextTransform: function (myInput,isUpper) {
if(isUpper)
{
return myInput.toUpperCase();
}
else{
return myInput.toLowerCase();
}
}
}
})
</script> </body>
</html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>过滤器</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<h1>{{price}}</h1>
<h1>{{price|myCurrency}}</h1>
</div>
<script>
new Vue({
el:"#container",
data:{
msg:"Hello VueJs",
price:356
},
//过滤器的本质 就是一个有参数有返回值的方法
filters:{
myCurrency:function(myInput){
var result = "$"+myInput;
return result;
}
}
})
</script>
</body>
</html>
最后一个例子是写死的
返回目录
vue自定义过滤器的创建与使用的更多相关文章
- vue自定义过滤器的创建和使用
1.简单介绍 过滤器的作用:实现数据的筛选.过滤.格式化. 过滤器的本质是一个有参数,有返回值的方法. 过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...
- Vue自定义过滤器
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...
- vue 自定义过滤器
vue允许自定义过滤器,被用作一些常见文本的格式化.由“管道符”指示,格式如下: <!-- 在两个大括号中 --> {{message | capitalize}} <!-- 在 ...
- vue自定义指令的创建和使用
一.自定义指令的创建和使用 Vue自带的指令很多,v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text...但是这些 ...
- ng 自定义过滤器的创建和使用
过滤器的本质就是一个方法,参数就是输入的值以及给过滤器指定的参数,返回值就是处理后要显示的值. ①过滤器创建var app = angular.module();app.filter(‘名称’,fun ...
- vue 自定义过滤器 格式化金额（保留两位小数）
1.js部分 import Vue from 'vue' Vue.filter('money', function(val) { val = val.toString().replace(/\$|\, ...
- Vue自定义过滤器格式化数字三位加一逗号
<template> <div class="index-compont"> <div class="totalCount"> ...
- vue.js学习 自定义过滤器使用（2）
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...
- flask框架下的jinja2模板引擎(2)(过滤器与自定义过滤器)
flask框架下的jinja2模块引擎(1):https://www.cnblogs.com/chichung/p/9774556.html 这篇论文主要用来记录下 jinja2 的过滤器. 什么是过 ...
随机推荐
- C# 集合(9) 持续更新
数组的大小是固定的.如果元素个数动态,就使用集合类. List<T>是与数组相当的集合类.其他的集合:队列.栈.链表.字典和集. .NET Framework 1.0 包括非泛型集合类,如 ...
- Python 字典 (4) 持续更新
字典一种用名字来引用值的数据结构,这种数据结构称为 映射(mapping) .字典中的键可以是数字.字符串和元组. 字典 创建和使用 创建 phonebook = {'Aaron':133000000 ...
- 洛谷P1026 统计单词个数【区间dp】
题目:https://www.luogu.org/problemnew/show/P1026 题意: 给定一个字符串,要求把他分成k段.给定s个单词,问划分成k段之后每段中包含的单词和最大是多少. 一 ...
- spring-boot-configuration-processor 是干啥用的
spring默认使用yml中的配置,但有时候要用传统的xml或properties配置,就需要使用spring-boot-configuration-processor了 引入pom依赖 <de ...
- CodeForces 834C - The Meaningless Game | Codeforces Round #426 (Div. 2)
/* CodeForces 834C - The Meaningless Game [ 分析,数学 ] | Codeforces Round #426 (Div. 2) 题意: 一对数字 a,b 能不 ...
- THUWC2020 游记
不知道标题该叫什么,那就叫游记吧.反正是来玩的. CSP-S 排到我省三十几名,也不知怎么就过了 THU 的初审. Day0 到了宾馆.和 cy 划了一晚上. 发现自己不会做这次月考数学题,丢人啊丢人 ...
- GitLab 如何在 Web 界面中 Merge branch
希望在 GitLab 中对 2 个 branch 进行合并,如何创建 Pull Request 并且如何进行合并呢? 在 GitLib 的 Web 界面中选择 Merge Requests 然后再界面 ...
- 苹果系统OSX中Automator批量重命名
Automator,看字面意思就无比强大,[自动机器].有什么能比自动还让人着魔? 答案是没有✔ 如果你用的是mac,如果你有一堆文件要重新整理命名,如果你还在Goole什么"批量重命名软件 ...
- 云闪付个人免签支付用xposed解决强制升级
云闪付的xposed程序之前用的是6.18的版本,前段时间突然不能用了,提示要升级到最新的7.0版本.之前这个云闪付的个人免签支付程序一直跑的挺好,云闪付也是所有免签支付里面最能跑量的,不甘就这么放弃 ...
- 【转载】详解CI、CD相关概念
在软件的编译发布的过程中,经常能够看到CI.CD这样的词语.其实他们是专业的缩写短语,这里介绍下他们的概念和区别. 敏捷软件开发 敏捷软件开发,英文全称:Agile software developm ...