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. cordova 学习笔记

    0.sdk安装 http://spring.io/guides/gs/android/ 1.安装(node.js 需要安装https://nodejs.org/) on OS X and Linux: ...

  2. 小兔伴伴家庭动物园AR智能早教产品上市

    2016年6月,经过乐卓大家庭所有人的共同努力,公司旗下首款新品——小兔伴伴之<家庭动物园>3D智能学习卡正式面世. 每个孩子都应该在合适的时间去体验丰富的声音.色彩和动作,<家庭动 ...

  3. python 字符串截取

    我们可以通过索引来提取想要获取的字符,可以把python的字符串也做为字符串的列表就更好理解 python的字串列表有2种取值顺序1是从左到右索引默认0开始的,最大范围是字符串长度少1s = 'ilo ...

  4. Mesh Wifi

    best idea ever Submitted by ozzy (not verified) on Mon, 2009-09-21 09:39. I thought of doing this on ...

  5. 解决git中文乱码

    和linux平台一样,在默认设置下,文件名称中包含中文的文件,在工作区状态输出.查看历史更改概要,以及在补丁文件中,文件名中的中文不能正确的显示,而是用若干八进制字符编码来显示,如下: git sta ...

  6. 一步一步实战扩展 ASP.NET Route，实现小写 URL、个性化 URL

    介绍 不知道大家在使用 ASP.NET MVC 时有没有一些扩展要求,反正我是有很多.在使用 MVC 这几年(PS:我是从 1.0 开始学,2.0.3.0 开发至今),我深深地觉得 MVC 的扩展性真 ...

  7. CSS实例

    CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面 ...

  8. 【解析 . PPT版】干货：阿里全息大数据构建与应用（包括：互联网金融、互联网+、精准营销...）

    作者:毛波,阿里巴巴资深数据专家,阿里数据管理平台(DMP)产品负责人. 摘要: 回顾传统数据仓库.商业智能到大型分布式数据平台的进化历程,深入阐述阿里的数据发展历史和数据观,以阿里DMP平台为例深入 ...

  9. 爬虫技术 -- 基础学习（五）解决页面编码识别（附c#代码）

    实现从Web网页提取文本之前,首先要识别网页的编码,有时候还需要进一步识别网页所使用的语言.因为同一种编码可能对应多种语言,例如UTF-8编码可能对应英文或中文等语言. 识别编码整体流程如下: (1) ...

  10. LoRaWAN协议(二)--LoRaWAN MAC数据包格式

    名词解析 上行:终端的数据发送经过一个或多个网关中转到达网络服务器. 下行:由网络服务器发送给终端设备,每条消息对应的终端设备是唯一确定的,而且只通过一个网关中转. LoRaWAN Classes L ...