gitHub地址: https://github.com/lily1010/vue_learn/tree/master/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.js学习 自定义过滤器使用（2）的更多相关文章

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

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

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

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

  3. vue.js学习记录

    vue.js学习记录 文章已同步我的github笔记https://github.com/ymblog/blog,欢迎大家加star~~ vue实例 生命周期 beforeCreate:不能访问thi ...

  4. Vue.js学习-组件注册与使用

    Vue.js学习文档 地址:https://cn.vuejs.org/v2/guide/ 关于自定义组件注册: 建议将<script></script>放在body标签之后 H ...

  5. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  6. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  7. vue.js学习资料

    vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...

  8. Vue.js学习笔记：在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  9. vue.js学习之better-scroll封装的轮播图初始化失败

    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...

随机推荐

  1. zuul学习

    1.zuul可以代理界面所需的后端服务,可以解决CORS(Cross-Origion-Resource-Sharing)和认证问题(authentication)问题 2.zuul是使用ribbon来 ...

  2. 【Asp.net入门03】第一个ASP.NET 应用程序-创建ASP.NET项目

    本部分主要内容: 创建并运行Asp.net项目 web窗体 数据模型 调用代码隐藏方法 数据验证 1.操作步骤 第一步:启动Visual Studio 2013,然后从File(文件)菜单中选择New ...

  3. Django templates and models

    models templates models and databases models 如何理解models A model is the single, definitive source of ...

  4. windows下使用tftp工具下载文件到开发板(linux)

    1.下载tftp工具,也可以上CSDN找个免费0积分的 http://www.52z.com/soft/11886.html 2.确保开发板和windows在同一网段 比如192.168.101.*段 ...

  5. c# lock的误解

    一直以为lock 一个实例就可以了,没想到实例的类型还是有区别的 static object lockObjStatic = new object(); object lockObj = new ob ...

  6. bzoj千题计划132：bzoj1189: [HNOI2007]紧急疏散evacuate

    http://www.lydsy.com/JudgeOnline/problem.php?id=1189 二分答案 源点向人连边,流量为1 门拆为mid个点,同一个门的第j个点向第j+1个点连边,流量 ...

  7. 《A First Course in Abstract Algebra with Applications》-chaper1-数论-棣莫弗定理

    定理1.24 (棣莫弗定理) 对每个实数x和每个正整数n有 基于棣莫弗定理的推论如下:

  8. MapReduce (hive表SequenceFile的结果做输入)、MultipleOutputs和Reduce端迭代iterable的一些说明

    很长时间以来一直写hive,嵌套脚本.偶尔写UDF.  最近用Hive的dynamic partition和多路插入做一些事情,很遗憾的结果是非常不稳定,有时能成功,有时失败.(可能是因为hive版本 ...

  9. 基本控件文档-UIScrollView

    CHENYILONG                                      基本控件文档-UIScrollView Fullscreen   基本使用作用UIScrollView可 ...

  10. json字符串与json对象转换

    从网上找的几种常用的转换方法,测试结果如下: 1.json字符串——>json对象 /* test 1 */ var str = '{"a":1,"b": ...