vue28-2.0-过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> window.onload=function(){
new Vue({
el:'#box',
data:{
msg:123
}
});
};
</script>
</head>
<body>
<div id="box">
{{msg | currency}} <!--没有效果-->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> window.onload=function(){
new Vue({
el:'#box',
data:{
msg:{a:1,b:2,c:3}
}
});
};
</script>
</head>
<body>
<div id="box">
{{msg}} <!--不需要{{msg | json}}：{a:1,b:2,c:3}-->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
Vue.filter('toDou',function(n){
//alert(input);
return n<10?'0'+n:''+n;
}); window.onload=function(){
new Vue({
el:'#box',
data:{
msg:9
}
});
};
</script>
</head>
<body>
<div id="box">
{{msg | toDou}} <!--toDou()参数是msg-->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
Vue.filter('toDou',function(n,a,b){
alert(a+','+b);
//alert(input);
return n<10?'0'+n:''+n;
}); window.onload=function(){
new Vue({
el:'#box',
data:{
msg:9
}
});
};
</script>
</head>
<body>
<div id="box">
{{msg | toDou '12' '5'}}
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
Vue.filter('toDou',function(n,a,b){
alert(a+','+b);
//alert(input);
return n<10?'0'+n:''+n;
}); window.onload=function(){
new Vue({
el:'#box',
data:{
msg:9
}
});
};
</script>
</head>
<body>
<div id="box">
{{msg | toDou('12','5')}}
</div>
</body>
</html>
6. 过滤器
之前:
系统就自带很多过滤
{{msg | currency}}
{{msg | json}}
....
limitBy
filterBy
.....
一些简单功能，自己通过js实现 到了2.0， 内置过滤器，全部删除了 lodash 工具库框架， _.debounce(fn,200) 自定义过滤器——还有
但是,自定义过滤器传参 之前: {{msg | toDou '12' '5'}}
现在: {{msg | toDou('12','5')}}
vue28-2.0-过滤器的更多相关文章
- vue2.0过滤器
最近一阶段,项目上比较清闲,有了更多的时间可以研究一下vue了. 这里记录一下关于vue2.0过滤器的学习. vue2.0删除了所有的框架自带的过滤器,也就是说,如果你在vue2.0当中想用过滤器,那 ...
- .netCore2.0 过滤器
不同的过滤器类型会在执行管道的不同阶段运行,因此他们各自有一套自己的应用场景.可以根据不同的业务需求和在请求管道中的执行位置来选择合适创建的过滤器.运行与MVC Action调用管道内的过滤器有时候被 ...
- STM32之CAN ---CAN ID过滤器分析
1 前言 在CAN协议里,报文的标识符不代表节点的地址,而是跟报文的内容相关的.因此,发送者以广播的形式把报文发送给所有的接收者.节点在接收报文时,根据标识符(CAN ID)的值决定软件是否需要该 ...
- Django中自定义过滤器的使用
我在这里做的是: 从数据库查出id递增的一些信息,展示在前台. 编写一个过滤器判断查出数据的id是偶数的返回True 奇数返回False 1 创建项目,创建应用,注册应用,配置settings.py文 ...
- vue2.0实现过滤
vue1.0和vue2.0差别还是挺多的,之前的vue1.0还有过滤器功能,到了2.0过滤器只能通过自己编写.以下是写的一个小demo: HTML <div id="app" ...
- vue.js学习：1.0到2.0的变化（区别）
一.生命周期 1.1.0的生命周期: 周期 解释 init 组件刚刚被创建,但Data.method等属性还没被计算出来 created 组件创建已经完成,但DOM还没被生成出来 beforeComp ...
- vue2.0自定义指令
前面一片文章说了vue2.0过滤器,其实自定义指令跟过滤器非常相似,单就定义方式而言,其与过滤器完全一致,分为局部指令,和全局指令.不过就是filter改为directive的区别. 过滤器一般用于对 ...
- Servlet3.0-使用注解定义过滤器(Filter)
本人正在学javaweb,遇到了在eclipse中,servlet3.0过滤器需不需要配置web.xml文件?通过实践得出结论,不用配置,只需要@WebFilter(filterName=" ...
- vue2 filter过滤器的使用
本章主要讲vue2的过滤器的使用 1.先介绍下vue1与vue2的filter区别,也就是vue2更新的地方 a: 2.0将1.0所有自带的过滤器都删除了,也就是说,在2.0中,要使用过滤器,则需要我 ...
- stm32 CAN过滤器组
在互联型产品中, CAN1和CAN2分享28个过滤器组 其它STM32F103xx系列产品中有14个过滤器组 位宽设置 四种配置方式: 1个32位的屏蔽位模式 2个32位的标识符列表模式,可以过滤2个 ...
随机推荐
- nginx访问日志access_log
在 nginx.conf 配置文件 http{} 方法体的括号内,增加或者打开以下代码注释: log_format main '$remote_addr - $remote_user [$time_l ...
- yii2.0 发送邮件带word小附件
把 common/config/main-local.php 下的 mailer 注释掉: 'mailer'=>[ 'class ...
- 在vue中使用的Echarts的步骤
1.首先在项目中安装Echarts npm install echarts -g --save //安装 2.在项目中引入Echarts(在main.js中引入) import echarts fro ...
- Centos6.6 yum源更新
1备份: cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d//CentOS-Base.repo.ori 2下载: wget -O /etc/y ...
- Ubuntu16.04 lnmp 环境搭建
Ubuntu16.04 lnmp 环境搭建 nginx 安装 sudo apt-add-repository ppa:nginx/stablesudo apt-add-repository ppa:o ...
- vux安装时报vux-loader配置问题
一.初始化:webpack 项目塔建: 使用vue-cli塔建基于webpack的vue环境.然后根据vux官网安装使用文档安装vux组件库及配置build/webpack.base.conf.js. ...
- 题解 洛谷 P1580 【yyy loves Easter_Egg I】
一言不合上代码: #include<cstdio> #include<cstring> ],bz[],dmz[]; int maohao,xf,ls,sss,lll,xxf,x ...
- maven跳过单元测试-maven.test.skip和skipTests的区别以及部分常用命令
-DskipTests,不执行测试用例,但编译测试用例类生成相应的class文件至target/test-classes下. -Dmaven.test.skip=true,不执行测试用例,也不编译测试 ...
- hdoj Let the Balloon Rise
/*Let the Balloon Rise Problem Description Contest time again! How excited it is to see balloons ...
- mysql-增删改数据
一.增加操作 INSERT用来插入或添加行到数据库表的.插入用以下几种方式: 1.插入完整的行 insert into customers values(null,'Pep E,LaPew','100 ...