<!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. 管理windows自启动程序

    1. 点击开始,在运行程序框中输入msconfig,然后回车. 在弹出的对话框中,点击”启动“选项卡,在启动项目列表中,把不需要的启动项目前面的对号去掉. 然后切换到”服务“选项卡,这里的服务项目列表 ...

  2. 记录python之递归函数

    函数move(n,a,b,c)的定义是将n个圆盘从a借助b移动到c. def move(n,a,b,c): if n==1: print a,'-->',c move (n-1,a,c,b) p ...

  3. 题解 LNOI2014 LCA

    题目:传送门 这道题根本不用lca,也没有部分分... 考虑求两个点xy的lca的深度. 我们将x到树根所有点的值都加1,然后查询y到根的和,其实就是lca的深度. 所以本题离线一下上树剖乱搞就可以了 ...

  4. Qt之OpenSSL

    简述 OpenSSL是一个强大的安全套接字层密码库,囊括主要的密码算法.常用的密钥和证书封装管理功能及SSL协议,并提供丰富的应用程序供测试或其它目的使用. 简述 下载安装 使用 更多参考 下载安装 ...

  5. 生成apk文件遇到的编译问题error: format not a string literal and no format arguments

    编译错误时使用的android-ndk为r9的版本号.报下面错误: "Compile++ thumb : cocosdenshion_static <= SimpleAudioEngi ...

  6. 直接插入排序（Straight Insertion Sort）

    直接插入排序(Straight Insertion Sort)的基本操作是将一个记录插入到已经排好序的有序表中,从而得到一个新的.记录数增1的有序表. /* 对顺序表L作直接插入排序 */ void ...

  7. border:none与border:0的区别

    border:none与border:0的区别体现为两点:一是理论上的性能差异,二是浏览器兼容性的差异. 性能差异: [border:0;]把border设为“0”像素效果等于border-width ...

  8. 关于nth-of-type和nth-child的关系

    一开始写样式的时候喜欢全部元素都来个class,后面发现这样一个页面下来很多个class,起名字起到发慌,然后老师说该多用 逻辑关系来写样式,就是这种第几个孩子啊这种,不知道你们有没有这种烦恼,要用的 ...

  9. 数位$dp$

    数位\(dp\)搞了一上午才搞懂.靠这种傻\(X\)的东西竟然花了我一上午的时间. 数位\(dp\) 概念 数位\(dp\)就是强制你分类一些数,例如给你一段区间,然后让你求出不包含\(2\)的数的个 ...

  10. Kali linux 2016.2（Rolling）里Metasploit连接（包括默认和自定义）的PostgreSQL数据库之后的切换到指定的工作空间

    不多说,直接上干货! 为什么要这么做? 答: 方便我们将扫描不同的目标或目标的不同段,进行归类.为了更好的后续工作! 前期博客 Kali linux 2016.2(Rolling)里Metasploi ...