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 的过滤器. 什么是过 ...
随机推荐
- Math.pow
一个Math函数,例如:Math.pow(4,3);返回4的三次幂,用法:Math.pow(x,y) x 必需传.底数.必须是数字. y 必需传.幂数.必须是数字. 如果结果是虚数或负数,则该方法将返 ...
- git 解决 error: failed to push some refs to 'https://github.com/xxxx.git'
在github远程创建仓库后, 利用gitbash进行提交本地文件的时候出现如下错误 [root@foundation38 demo]# git push -u origin master Usern ...
- MessageBox和ShellExecute初体验
#include <stdio.h> //包含头文件,标准输入输出库 #include <windows.h> //包含windows头文件,ShellExecute正来自于此 ...
- 爬虫代理池源代码测试-Python3WebSpider
元类属性的使用 来源: https://github.com/Python3WebSpider/ProxyPool/blob/master/proxypool/crawler.py 主要关于元类的使用 ...
- JavaScript三元运算符
㈠条件运算符也叫做三元运算符 ⑴语法:条件表达式?语句1:语句2: ⑵执行的流程: ①条件运算符在执行时,首先对条件表达式进行求值 ▶如果该值为true,则执行语句1,并返回执行结果 ▶如果该值为fa ...
- pycharm批量查找替换,正则匹配
ctrl + r:查找替换 ctrl+f:查找 ctrl+shift+r:全局查找替换 ctrl+alt+f:全局查找 shift+tab将代码左对齐 replace all 完成
- blur([[data],fn]) 当元素失去焦点时触发 blur 事件。
blur([[data],fn]) 概述 当元素失去焦点时触发 blur 事件.大理石平台生产厂 这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为.可以通过返回false来防止触发 ...
- 部分易错JS知识点整理（缓慢填坑）
主要还是各地搜刮来的,本人对于这方面的总结还是8彳亍,给各位大佬磕头了砰砰砰 1. 2.JS闭包和匿名对象以及作用域 js在执行之前,会将所有带var和function的进行提前定义和声明.(带var ...
- Educational Codeforces Round 13 D. Iterated Linear Function 逆元+公式+费马小定理
D. Iterated Linear Function time limit per test 1 second memory limit per test 256 megabytes input s ...
- bbs--点赞
bbs---点赞 需求分析 页面展示 1 点赞 和 踩灭 按钮展示 1 用户未登录,不处理点赞踩灭,给用户提供登录接口 2 登录 1 第一次点点赞/踩灭 1 点赞成功 数据+1 提示点赞成功 ...