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. Android之输入框光标和Hint的位置

    如图所示,要实现这一的需求,一般人的布局方式就是左边一button,右边一button,中间一个EditText,为了输入框的响应触摸范围更大往往不会把宽度设置为wrap_content,要么设置成m ...

  2. Ubuntu 13.04 双显卡安装NVIDIA GT 630M驱动

    [日期:2013-05-24]   Linux系统:Ubuntu 13.04 安装 bumblebee 以管理双显卡,下面命令会自动安装NVIDIA显卡驱动 sudo add-apt-reposito ...

  3. struts2整合CKEditor和CKFinder实现上传

    上一篇文章给大家分享了CKEditor+CKFinder+JSP实现了在线编辑器上传图片的功能,这里在给大家分享一下如何在前面的基础上在struts2下实现这样的功能. 实现与Struts2的整合,整 ...

  4. [iOS]关于状态栏(UIStatusBar)的若干问题

    版本: OS X 10.10.5 Xcode 6.4(6E35b) iOS >= 7 一.概述 状态栏(UIStatusBar)指iPhone/iPad/iPod屏幕顶部用于显示网络.时间和电量 ...

  5. C10K问题渣翻译

    The C10K problem [Help save the best Linux news source on the web -- subscribe to Linux Weekly News! ...

  6. 菜鸟学Windows Phone 8开发(1)——创建第一个应用程序

    本系列文章来源MSDN的 面向完全新手的 Windows Phone 8 开发 主要是想通过翻译本系列文章来巩固下基础知识顺带学习下英语和练习下自己的毅力(因为打算每天翻译一篇,但是发现翻译这篇花费了 ...

  7. Tips1:用 Export Package选项来分享你的成果

    如果你不是一个人工作,你可能需要和其他人共享一个工程文件,Unity工程文件中的一些关键元素默认是隐藏的,因此通过复制Assets文件夹的方法并不完善.Unity自带的UnityPackage格式的文 ...

  8. HTML5开发手机项目—个人总结

    让网页的宽度自适应屏幕<meta name="viewport" content="width=device-width"/>   1)html上加 ...

  9. SQL查询语句去除重复行

    1.存在两条完全相同的纪录 这是最简单的一种情况,用关键字distinct就可以去掉 select distinct * from table(表名) where (条件) 2.存在部分字段相同的纪录 ...

  10. [git]查看某一行代码是谁写的

    git blame filename,'blame'意思为责怪!哈哈哈. 就会列出来每行的修改纪录.你可以通过行数或者代码来查看,是谁的锅!