<!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>

    </script>

</head>

<body>

    <div id="box">

        {{a | toDou}}

    </div>

    <script>

        Vue.filter('toDou',function(input){

            return input<10?'0'+input:''+input;

        });

        var vm=new Vue({

            data:{

                a:9

            },

            methods:{

            }

        }).$mount('#box');

    </script>

</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>

    </script>

</head>

<body>

    <div id="box">

        {{a | toDou 1 2}}

    </div>

    <script>

        Vue.filter('toDou',function(input,a,b){

            alert(a+','+b);

            return input<10?'0'+input:''+input;

        });

        var vm=new Vue({

            data:{

                a:9

            },

            methods:{

            }

        }).$mount('#box');

    </script>

</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>

    </script>

</head>

<body>

    <div id="box">

        {{a | date}}

    </div>

    <script>

        Vue.filter('date',function(input){

            var oDate=new Date(input);

            return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();

        });

        var vm=new Vue({

            data:{

                a:Date.now()

            },

            methods:{

            }

        }).$mount('#box');

    </script>

</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>

    </script>

</head>

<body>

    <div id="box">

        <input type="text" v-model="msg | fiterHtml">

        <br>

        <div v-html="msg">

        </div>

    </div>

    <script>

        //<h2>welcome</h2>

        Vue.filter('fiterHtml',function(input){

            return input.replace(/<[^<]+>/g,'');

        });

        var vm=new Vue({

            data:{

                msg:'<strong>welcome</strong>'

            },

            methods:{

            }

        }).$mount('#box');

    </script>

</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>

        //<h2>welcome</h2>

        Vue.filter('filterHtml',{

            read:function(input){ //数据-视图页面

                alert(1);

                return input.replace(/<[^<]+>/g,'');

            },

            write:function(val){ //视图页面 -> 数据

                console.log(val);

                return val;

            }

        });

        window.onload=function(){

            var vm=new Vue({

                data:{

                    msg:'<strong>welcome</strong>'

                }

            }).$mount('#box');

        };

    </script>

</head>

<body>

    <div id="box">

        <input type="text" v-model="msg | filterHtml">

        <br>

        {{{msg}}}

    </div>

</body>

</html>

vue14 自定义过滤器的更多相关文章

  1. 实现MVC自定义过滤器，自定义Area过滤器，自定义Controller，Action甚至是ViewData过滤器

    MVC开发中几种以AOP方式实现的Filters是非常好用的,默认情况下,我们通过App_Start中的FilterConfig来实现的过滤器注册是全局的,也就是整个应用程序都会使用的,针对单独的Fi ...

  2. lucene自定义过滤器

    先介绍下查询与过滤的区别和联系,其实查询(各种Query)和过滤(各种Filter)之间非常相似,可以这样说只要用Query能完成的事,用过滤也都可以完成,它们之间可以相互转换,最大的区别就是使用过滤 ...

  3. asp.net MVC之 自定义过滤器(Filter) - shuaixf

    一.系统过滤器使用说明 1.OutputCache过滤器 OutputCache过滤器用于缓存你查询结果,这样可以提高用户体验,也可以减少查询次数.它有以下属性: Duration :缓存的时间, 以 ...

  4. angular之自定义过滤器的使用

    自定义过滤器需要使用filter函数,格式如下: filter("filterName',function(){ return function(target,args){ .... } } ...

  5. 第六节：Vue过滤器的用法和自定义过滤器

    1.过滤器的用法,用  '|' 分割表达式和过滤器. 例如:{{ msg |  filter}}     {{msg | filter(a)}}  a就标识filter的一个参数. 用两个过滤器:{{ ...

  6. .net中自定义过滤器对Response内容进行处理

    原文:http://www.cnblogs.com/zgqys1980/archive/2008/09/02/1281895.html 代码DEMO:http://files.cnblogs.com/ ...

  7. asp.net MVC之 自定义过滤器(Filter)

    一.系统过滤器使用说明 1.OutputCache过滤器 OutputCache过滤器用于缓存你查询结果,这样可以提高用户体验,也可以减少查询次数.它有以下属性: Duration:缓存的时间,以秒为 ...

  8. Vue自定义过滤器

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...

  9. 关于angularjs 中自定义过滤器

    包子认为,在angularjs中,经常需要用到自定义过滤器,来过滤相应的功能,自定义过滤器非常的简单,我就直接贴代码啦 其中input就是你需要进行操作的对象,,,用法就直接就是 是不是很easy.. ...

随机推荐

  1. vue 连接后台

    在 index.js 中可以配置后台的地址:代理的方式: 这个文件在 config 中 proxyTable: { // 连接后台 '/api':{ target:"http://new.w ...

  2. [NOIP2012提高组]疫情控制

    题目:洛谷P1084.codevs1218.Vijos P1783. 题目大意:有一棵n个节点的,根为1的带权树和m支军队.每支军队可以在一个点上停下,那么从1开始就不能经过这个点了.现在有m支军队已 ...

  3. Innodb中的事务隔离级别和锁的关系（转载）

    nodb中的事务隔离级别和锁的关系 原文:https://tech.meituan.com/innodb-lock.html ameng ·2014-08-20 15:50 前言: 我们都知道事务的几 ...

  4. java jar打包命令使用

    用法:jar {ctxu}[vfm0Mi] [jar-文件] [manifest-文件] [-C 目录] 文件名 ... 选项: -c 创建新的存档 -t 列出存档内容的列表 -x 展开存档中的命名的 ...

  5. Linux学习之计算机基础理论

    一.描述计算机的组成及其功能. 计算机系统是由硬件系统(hardware)和软件系统(software system)两部分组成. 硬件系统: 从硬件基本结构上来讲,计算机是由运算器.控制器.存储器. ...

  6. Mysql学习总结（25）——MySQL外连接查询

    1.左外连接left outer join或者left jion,outer可以省略不写,下边的右连接和全连接也一样: 左外连接的意思是,以left join左边的表中的数据为基准,即左边的表中有的必 ...

  7. Java基础学习总结（5）——多态

    一.面向对象最核心的机制--动态绑定,也叫多态 1.1.通过下面的例子理解动态绑定,即多态 package javastudy.summary; class Animal { /** * 声明一个私有 ...

  8. NYIST 531 太空飞行计划

    太空飞行计划 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述        W 教授正在为国家航天中心计划一系列的太空飞行.每次太空飞行可进行一系列商业性实验而获取利 ...

  9. 国庆 day 7 上午

    思路:模拟,set记录一下. #include<set> #include<cstdio> #include<cstring> #include<iostre ...

  10. Android Camera子系统之Linux C应用开发人员View

    Android Camera HAL通过V4L2接口与内核Camera Driver交互.本文从Linux应用开发人员的角度审视Android Camera子系统. V4L2应用开发一般流程: 1. ...