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个 ...
随机推荐
- POJ3764 The xor-longest Path（字典树)
题意 给你一棵树,n个节点,n-1条边每条边i都有一个权值wi.定义任意两点间的权值为:这两点间的路径上的所有边的值的异或.比如a点和b点间有i,j,k三条边,那么ab两点间的权值为:wi^wj^wk ...
- makefile--回顾基础篇
前阵子让写makefile,纠结了下,基本忘记差不多了. 1.gcc的编译选项 -c 只是编译不链接,生成目标文件“.o” -S 只是编译不汇编,生成汇编代码 -E 只进行预编译,不做其他处理 -g ...
- MHA搭建及故障维护
MHA是一种方便简单可靠的MySQL高可用架构,具体的介绍我在这里就不多说了,下面是我在网上找的一个教程,我在此基础上进行了一些修改: 大致步骤 (一).环境介绍 (二).用ssh-keygen实现四 ...
- 教你用webpack搭一个vue脚手架[超详细讲解和注释！]
1.适用人群 1.对webpack知识有一定了解但不熟悉的同学. 2.女同学!!!(233333....) 2.目的 在自己对webpack有进一步了解的同时,也希望能帮到一些刚接触webpack的同 ...
- vue非父子组件间传参问题
最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...
- chrome默认打开隐身模式
chrome图标右键属性,在“目标”后添加参数“ --incognito”(注意是双短划线,不包括双引号,双短划线前加一空格)就可以直接以隐身模式启动chrome了
- legend---八、php对象如何转换成js对象
legend---八.php对象如何转换成js对象 一.总结 一句话总结:a.直接转换:b.通过json对象做中间桥梁 1.为什么传递给父亲构造函数的参数不能写默认值? 这里的第三行的比如$type不 ...
- NAS是什么
NAS是什么 简介 NAS(Network Attached Storage:网络附属存储)按字面简单说就是连接在网络上,具备资料存储功能的装置,因此也称为“网络存储器”.它是一种专用数据存储服务器. ...
- DGA特征挖掘
摘自:https://paper.seebug.org/papers/Archive/drops2/%E7%94%A8%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E8%A ...
- 4.C语言文件操作
总论 1.fopen r以只读方式打开文件,该文件必须存在 r+以可读写方式打开文件,文件必须存在 rb+读写打开一个二进制文件,允许读写数据,文件必须存在 rw+读写打开一个文本文件,允许读和写 w ...