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. WHY C++ ?(by Herb Sutter) & C++17 standard

    WHY C++ ? C++

  2. Service Fabric基本概念：Partition/Replicas示例

    作者:张鼎松 (Dingsong Zhang) @ Microsoft 在上一节的结尾简单介绍了Service Fabric中分区Partitions和复制replicas的概念,本节主要以示例的形式 ...

  3. Python模拟登录cnblogs

    Python利用requests.Session对象模拟浏览器登录cnblogs request.Session对行可以跨请求的保持cookie,非常方便的用于模拟登录. cnblogs登录页面分析: ...

  4. linux split 切割大文件

    语法: split  [-l <行数>] [-b <字节>] [-C <字节>] [要切割的目标文件] [输出文件名前缀] 说明: -l <行数> 指定 ...

  5. linux shell 获取当前日期/时间

    1. 当前日期 [root@Tomcat DFJR-ERP]# cur_date="`date +%Y-%m-%d`" [root@Tomcat DFJR-ERP]# echo $ ...

  6. Java并发编程原理与实战八：产生线程安全性问题原因（javap字节码分析）

    前面我们说到多线程带来的风险,其中一个很重要的就是安全性,因为其重要性因此,放到本章来进行讲解,那么线程安全性问题产生的原因,我们这节将从底层字节码来进行分析. 一.问题引出 先看一段代码 packa ...

  7. Could not open input file: artisan

    执行php artisan 命令,报错Could not open input file: artisan artisan 是 Laravel 项目下的指令文件,在Laravel 项目的根目录下可以看 ...

  8. 【学习笔记】FreeMarker 之于Servlet与Stuts2的应用

    FreeMarker应用在Servlet(0配置web.xml形式): 准备环境: tomcat7.eclipse最新版.jdk1.8.freemarker v2.3.20.jar 举例项目结构图: ...

  9. idea 永久注册

    1.在百度输入http://idea.lanyus.com/  2.点击这个网址http://idea.lanyus.com/jar/JetbrainsCrack-3.1-release-enc.ja ...

  10. 你都掌握了吗？jQuery 选择器大全

    在 Dom 编程中我们只能使用有限的函数根据 id 或者 TagName 获取 Dom 对象. 然而在 jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, ...