1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.  
  11.     </style>
  12.     <script src="vue.js"></script>
  13.     <script>
  14.  
  15.         window.onload=function(){
  16.             new Vue({
  17.                 el:'#box',
  18.                 data:{
  19.                     msg:123
  20.                 }
  21.             });
  22.         };
  23.     </script>
  24. </head>
  25. <body>
  26.     <div id="box">
  27.         {{msg | currency}}    <!--没有效果-->
  28.     </div>
  29. </body>
  30. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.  
  11.     </style>
  12.     <script src="vue.js"></script>
  13.     <script>
  14.  
  15.         window.onload=function(){
  16.             new Vue({
  17.                 el:'#box',
  18.                 data:{
  19.                     msg:{a:1,b:2,c:3}
  20.                 }
  21.             });
  22.         };
  23.     </script>
  24. </head>
  25. <body>
  26.     <div id="box">
  27.         {{msg}}    <!--不需要{{msg | json}}：{a:1,b:2,c:3}-->
  28.     </div>
  29. </body>
  30. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.  
  11.     </style>
  12.     <script src="vue.js"></script>
  13.     <script>
  14.         Vue.filter('toDou',function(n){
  15.             //alert(input);
  16.             return n<10?'0'+n:''+n;
  17.         });
  18.  
  19.         window.onload=function(){
  20.             new Vue({
  21.                 el:'#box',
  22.                 data:{
  23.                     msg:9
  24.                 }
  25.             });
  26.         };
  27.     </script>
  28. </head>
  29. <body>
  30.     <div id="box">
  31.         {{msg | toDou}}  <!--toDou()参数是msg-->
  32.     </div>
  33. </body>
  34. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.  
  11.     </style>
  12.     <script src="vue.js"></script>
  13.     <script>
  14.         Vue.filter('toDou',function(n,a,b){
  15.             alert(a+','+b);
  16.             //alert(input);
  17.             return n<10?'0'+n:''+n;
  18.         });
  19.  
  20.         window.onload=function(){
  21.             new Vue({
  22.                 el:'#box',
  23.                 data:{
  24.                     msg:9
  25.                 }
  26.             });
  27.         };
  28.     </script>
  29. </head>
  30. <body>
  31.     <div id="box">
  32.         {{msg | toDou '12' '5'}}
  33.     </div>
  34. </body>
  35. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.  
  11.     </style>
  12.     <script src="vue.js"></script>
  13.     <script>
  14.         Vue.filter('toDou',function(n,a,b){
  15.             alert(a+','+b);
  16.             //alert(input);
  17.             return n<10?'0'+n:''+n;
  18.         });
  19.  
  20.         window.onload=function(){
  21.             new Vue({
  22.                 el:'#box',
  23.                 data:{
  24.                     msg:9
  25.                 }
  26.             });
  27.         };
  28.     </script>
  29. </head>
  30. <body>
  31.     <div id="box">
  32.         {{msg | toDou('12','5')}}
  33.     </div>
  34. </body>
  35. </html>
  1. 6. 过滤器
  2.     之前:
  3.         系统就自带很多过滤
  4.         {{msg | currency}}
  5.         {{msg | json}}
  6.         ....
  7.         limitBy
  8.         filterBy
  9.         .....
  10.     一些简单功能，自己通过js实现
  11.  
  12.     到了2.0， 内置过滤器，全部删除了
  13.  
  14.     lodash    工具库框架，    _.debounce(fn,200)
  15.  
  16.     自定义过滤器——还有
  17.         但是,自定义过滤器传参
  18.  
  19.         之前:    {{msg | toDou '12' '5'}}
  20.         现在:     {{msg | toDou('12','5')}}

vue28-2.0-过滤器的更多相关文章

  1. vue2.0过滤器

    最近一阶段,项目上比较清闲,有了更多的时间可以研究一下vue了. 这里记录一下关于vue2.0过滤器的学习. vue2.0删除了所有的框架自带的过滤器,也就是说,如果你在vue2.0当中想用过滤器,那 ...

  2. .netCore2.0 过滤器

    不同的过滤器类型会在执行管道的不同阶段运行,因此他们各自有一套自己的应用场景.可以根据不同的业务需求和在请求管道中的执行位置来选择合适创建的过滤器.运行与MVC Action调用管道内的过滤器有时候被 ...

  3. STM32之CAN ---CAN ID过滤器分析

      1 前言 在CAN协议里,报文的标识符不代表节点的地址,而是跟报文的内容相关的.因此,发送者以广播的形式把报文发送给所有的接收者.节点在接收报文时,根据标识符(CAN ID)的值决定软件是否需要该 ...

  4. Django中自定义过滤器的使用

    我在这里做的是: 从数据库查出id递增的一些信息,展示在前台. 编写一个过滤器判断查出数据的id是偶数的返回True 奇数返回False 1 创建项目,创建应用,注册应用,配置settings.py文 ...

  5. vue2.0实现过滤

    vue1.0和vue2.0差别还是挺多的,之前的vue1.0还有过滤器功能,到了2.0过滤器只能通过自己编写.以下是写的一个小demo: HTML <div id="app" ...

  6. vue.js学习：1.0到2.0的变化（区别）

    一.生命周期 1.1.0的生命周期: 周期 解释 init 组件刚刚被创建,但Data.method等属性还没被计算出来 created 组件创建已经完成,但DOM还没被生成出来 beforeComp ...

  7. vue2.0自定义指令

    前面一片文章说了vue2.0过滤器,其实自定义指令跟过滤器非常相似,单就定义方式而言,其与过滤器完全一致,分为局部指令,和全局指令.不过就是filter改为directive的区别. 过滤器一般用于对 ...

  8. Servlet3.0-使用注解定义过滤器(Filter)

    本人正在学javaweb,遇到了在eclipse中,servlet3.0过滤器需不需要配置web.xml文件?通过实践得出结论,不用配置,只需要@WebFilter(filterName=" ...

  9. vue2 filter过滤器的使用

    本章主要讲vue2的过滤器的使用 1.先介绍下vue1与vue2的filter区别,也就是vue2更新的地方 a: 2.0将1.0所有自带的过滤器都删除了,也就是说,在2.0中,要使用过滤器,则需要我 ...

  10. stm32 CAN过滤器组

    在互联型产品中, CAN1和CAN2分享28个过滤器组 其它STM32F103xx系列产品中有14个过滤器组 位宽设置 四种配置方式: 1个32位的屏蔽位模式 2个32位的标识符列表模式,可以过滤2个 ...

随机推荐

  1. CSS常用样式--background

    CSS background 属性 参考:W3school- CSS background 所有浏览器都支持 background 属性,其简写形式,在一个声明中设置所有的背景属性,各属性需按顺序,语 ...

  2. malloc 和free例程

    #include <stdio.h>#include <stdlib.h>int main(){int a;scanf("%d",&a);int * ...

  3. ocrsearch的横屏转竖屏的解决方案

    //这是其中解决预览图的一部分(坑了好久的)@Override public void onPreviewFrame(byte[] data, Camera camera) { Size previe ...

  4. GenIcam标准（二）

    2     GenApi模块 – 配置相机 2.1. 简介 GenApi模块解决如何去配置相机的问题.主要的思路是,让相机生产厂商为他们的相机提供机器可以识别的产品说明.这些相机描述文件(camera ...

  5. 【BZOJ 1193】 [HNOI2006]马步距离

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 原问题可以等价为两个点. 然后其中一个点要移动到另外一个点. 那么我们可以把左下角那个点(对称总是可以得到一个点在左下角)放在原点的 ...

  6. 【C语言】递归函数DigitSum(n)

    //写一个递归函数DigitSum(n),输入一个非负整数,返回组成它的数字之和, //比如,调用DigitSum(1729),则应该返回1+7+2+9,它的和是19 #include <std ...

  7. java 获取类路劲注意点

    在resin里用MyConstants.class.getResource("/").getPath(),这个方法时,获取到的路劲少[项目名称],最好用MyConstants.cl ...

  8. poj_2352树状数组

    因为y已经排好序了,用x坐标建立一维树状数组 #include<iostream> #include<cstdio> #include<cstring> using ...

  9. Codeforces434D 网络流

    思路: 题意:有n<=50个点,每个点有xi有[li, ri]种取值,-100 <= li <= ri <= 100,并且给定m<=100条边,每条边为u,v,d表示xu ...

  10. 重温前端基础之-css浮动之怪异现象

    其实,两种情况中box2的内容都是围绕着浮动元素box1来的. 因为:浮动元素会覆盖块元素,但块元素里的内容(内联盒)不会被覆盖,而是围绕着浮动盒. 将box1的背景色去掉,真相就大白了: 此时发现, ...