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 的过滤器. 什么是过 ...
随机推荐
- JavaScript中定义类的方式详解
本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的exte ...
- VSCODE常用插件使用记录
常用必备: 1.vscode-icon 让 vscode 资源树目录加上图标,必备良品! 2.Path Intellisense 自动路劲补全,默认不带这个功能的 3.beautify Beautif ...
- 前端知识体系：JavaScript基础-原型和原型链-instanceof的底层实现原理
instanceof的底层实现原理(参考文档) instanceof的实现实际上是调用JS的内部函数 [[HasInstance]] 来实现的,其实现原理是:只要右边变量的prototype在左边变量 ...
- ibatis调用存储过程(无返回参数)
ibatis调用存储过程例子: java: getSqlMapClientTemplate().insert(sql, paraMap) ibatis xml: <parameterMap id ...
- zabbix添加监控项以及常用的键值
zabbix自身提供了丰富的监控项,下面以“cpu空闲值”为例介绍zabbix如何添加新的监控项 1.创建主机群组 配置——主机群组——创建主机群组 2.创建主机 配置——主机——创建主机 3.添 ...
- MySQL索引-B+树（看完你就明白了）
索引是一种数据结构,用于帮助我们在大量数据中快速定位到我们想要查找的数据.索引最形象的比喻就是图书的目录了.注意这里的大量,数据量大了索引才显得有意义,如果我想要在 [1,2,3,4] 中找到 4 这 ...
- JavaScript三元运算符
㈠条件运算符也叫做三元运算符 ⑴语法:条件表达式?语句1:语句2: ⑵执行的流程: ①条件运算符在执行时,首先对条件表达式进行求值 ▶如果该值为true,则执行语句1,并返回执行结果 ▶如果该值为fa ...
- Luogu P2567 [SCOI2010]幸运数字 容斥+脑子
双倍经验:BZOJ 2393 Cirno的完美算数教室 做法:先把$[1,r]$中所有的幸运数字筛出来,然后用这些幸运数字来筛$[l,r]$中的近似幸运号码: 剪枝:当一个幸运数字$a[i]$是另一个 ...
- js监听页面标签切换
var OriginTitile = document.title, titleTime; document.addEventListener('visibilitychange', function ...
- codeforces685B
CF685B Kay and Snowflake 题意翻译 输入一棵树,判断每一棵子树的重心是哪一个节点. 题目描述 After the piece of a devilish mirror hit ...