gitHub地址: https://github.com/manlili/vue_learn里面的lesson05

一 自定义过滤器(注册在Vue全局)

注意事项:

(1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面

(2) 过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算

(3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突

(4)用户从input输入的数据在回传到model之前也可以先处理

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>vue自定义过滤器</title>

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    </head>

    <body>

        <div class="test">

            <p>{{message | sum}}</p>

            <p>{{message | cal 10 20}}</p>  <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->

            <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->

            <input type="text" v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->

        </div>

        <script type="text/javascript">

//        -----------------------------------------华丽分割线(从model->view)---------------------------------------

            Vue.filter("sum", function(value) {   //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面

                return value + 4;

            });

            Vue.filter('cal', function (value, begin, xing) {   //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面

                return value + begin + xing;

            });

//        -----------------------------------------华丽分割线(从view->model)---------------------------------------

            Vue.filter("change", {

                read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值

                    return value;

                },

                write: function (newVal,oldVal) { // view -> model  在写回数据之前格式化值

                    console.log("newVal:"+newVal);

                    console.log("oldVal:"+oldVal);

                    return newVal;

                }

            });

            var myVue = new Vue({

                el: ".test",

                data: {

                    message:12

                }

            });

        </script>

    </body>

</html>

二 自定义过滤器(注册在实例化内部)

上面的例子直接注册在Vue全局上面,其他不用这个过滤器的实例也会被迫接受,其实过滤器可以注册在实例内部,仅在使用它的实例里面注册

上面的程序改写为:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>vue自定义过滤器</title>

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    </head>

    <body>

        <div class="test">

            <p>{{message | sum}}</p>

            <p>{{message | cal 10 20}}</p>  <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->

            <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->

            <input type="text" v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->

        </div>

        <script type="text/javascript">

            Vue.filter("change", {

                read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值

                    return value;

                },

                write: function (newVal,oldVal) { // view -> model  在写回数据之前格式化值

                    console.log("newVal:"+newVal);

                    console.log("oldVal:"+oldVal);

                    return newVal;

                }

            });

            var myVue = new Vue({

                el: ".test",

                data: {

                    message:12

                },

                filters: {

                    sum: function (value) {

                        return value + 4;

                    },

                    cal: function (value, begin, xing) {

                        return value + begin + xing;

                    }

                }

            });

        </script>

    </body>

</html>

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

  1. vue 自定义过滤器

    vue允许自定义过滤器,被用作一些常见文本的格式化.由“管道符”指示,格式如下: <!-- 在两个大括号中 --> {{message | capitalize}}   <!-- 在 ...

  2. vue自定义过滤器的创建和使用

    1.简单介绍   过滤器的作用:实现数据的筛选.过滤.格式化.   过滤器的本质是一个有参数,有返回值的方法.   过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...

  3. vue自定义过滤器的创建与使用

    原文地址 过滤器:生活中有很多例子,净水器 空气净化器 .过滤器的作用:实现数据的筛选.过滤.格式化. vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了. 1.过 ...

  4. vue 自定义过滤器 格式化金额（保留两位小数）

    1.js部分 import Vue from 'vue' Vue.filter('money', function(val) { val = val.toString().replace(/\$|\, ...

  5. Vue自定义过滤器格式化数字三位加一逗号

    <template> <div class="index-compont"> <div class="totalCount"> ...

  6. vue.js学习 自定义过滤器使用（2）

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

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

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

  8. Vue.js学习 Item14 – 过滤器与自定义过滤器

    基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('re ...

  9. vue.js学习 自定义过滤器使用（1）

    在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器.我们参考了一些比较完善的过滤器,比如orderBy 和 filterBy.而且我们可以链式调用过滤器,一个接一个过滤.因此,我们可以定 ...

随机推荐

  1. .NET 相关工具

    加密工具,反DUMP,反调试,反编译,加密代码资源内容,混淆流程,变量.Confuser is a protector/obfuscator for .NET, providing great sec ...

  2. DMSFrame 之SqlCacheDependency（一）

    1.SqlCacheDependency都是我们常用的一种Cache写法了.对后面的SQL 2005算是比较成熟的一种缓存模式了,这里介绍一下DMSFrame的SqlCacheDependency是怎 ...

  3. ReentrantLock的使用

    class BoundedBuffer { final Lock lock = new ReentrantLock(); final Condition notFull = lock.newCondi ...

  4. 聊一聊google的Knowledge Graph

    什么是Knowledge Graph? 它是google用于增强它的搜索引擎的功能和提高搜索结果质量的一种技术.在2012年5月16日提出,除了提供基本的与主题相关的链接服务之外,它还能结构化与主题相 ...

  5. (转)linux文件读写的流程

    转自http://hi.baidu.com/_kouu/item/4e9db87580328244ef1e53d0 在<linux内核虚拟文件系统浅析>这篇文章中,我们看到文件是如何被打开 ...

  6. java 时间转换

    public static int timestrtosec(String time) {        if (Strings.isNullOrEmpty(time)) {            r ...

  7. IIS限制ip访问

    1.禁止IP访问 http://jingyan.baidu.com/article/22fe7ced0462633002617f39.html 2.限制IP访问频率 http://q.cnblogs. ...

  8. typeof与GetType

    typeof: The typeof operator is used to obtain the System.Type object for a type. 运算符,获得某一类型的 System. ...

  9. [Solution] 简单数字识别之Tesseract

    图像识别涉及的理论:傅里叶变换,图形形态学,滤波,矩阵变换等等. Tesseract的出现为了解决在没有这些复杂的理论基础,快速识别图像的框架. 准备: 1.样本图像学习,预处理 (平均每1个元素出现 ...

  10. Node.js爬虫数据抓取 -- 问题总结

    一  返回的信息提示  Something went wrong  request模块请求出现未知错误 其中,所用代码如下(无User-Agent部分) 问题多次派查无果,包括: 1:postman请 ...