gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05

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

注意事项:

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

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>vue自定义过滤器</title>
  6.         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.     </head>
  9.     <body>
  10.         <div class="test">
  11.             <p>{{message | sum}}</p>
  12.             <p>{{message | cal 10 20}}</p>  <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->
  13.             <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
  14.  
  15.             <input type="text" v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->
  16.  
  17.         </div>
  18.         <script type="text/javascript">
  19.  
  20. //        -----------------------------------------华丽分割线(从model->view)---------------------------------------
  21.             Vue.filter("sum", function(value) {   //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
  22.                 return value + 4;
  23.             });
  24.  
  25.             Vue.filter('cal', function (value, begin, xing) {   //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
  26.                 return value + begin + xing;
  27.             });
  28.  
  29. //        -----------------------------------------华丽分割线(从view->model)---------------------------------------
  30.             Vue.filter("change", {
  31.                 read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
  32.                     return value;
  33.                 },
  34.                 write: function (newVal,oldVal) { // view -> model  在写回数据之前格式化值
  35.                     console.log("newVal:"+newVal);
  36.                     console.log("oldVal:"+oldVal);
  37.                     return newVal;
  38.                 }
  39.             });
  40.  
  41.             var myVue = new Vue({
  42.                 el: ".test",
  43.                 data: {
  44.                     message:12
  45.                 }
  46.             });
  47.  
  48.         </script>
  49.     </body>
  50. </html>

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

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

上面的程序改写为:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>vue自定义过滤器</title>
  6.         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.     </head>
  9.     <body>
  10.         <div class="test">
  11.             <p>{{message | sum}}</p>
  12.             <p>{{message | cal 10 20}}</p>  <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->
  13.             <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
  14.  
  15.             <input type="text" v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->
  16.  
  17.         </div>
  18.         <script type="text/javascript">
  19.             Vue.filter("change", {
  20.                 read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
  21.                     return value;
  22.                 },
  23.                 write: function (newVal,oldVal) { // view -> model  在写回数据之前格式化值
  24.                     console.log("newVal:"+newVal);
  25.                     console.log("oldVal:"+oldVal);
  26.                     return newVal;
  27.                 }
  28.             });
  29.  
  30.             var myVue = new Vue({
  31.                 el: ".test",
  32.                 data: {
  33.                     message:12
  34.                 },
  35.                 filters: {
  36.                     sum: function (value) {
  37.                         return value + 4;
  38.                     },
  39.                     cal: function (value, begin, xing) {
  40.                         return value + begin + xing;
  41.                     }
  42.                 }
  43.             });
  44.  
  45.         </script>
  46.     </body>
  47. </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. GNU C ------ __attribute__

    attribute是GNU C特色之一,attribute可以设置函数属性(Function Attribute ).变量属性(Variable Attribute )和类型属性(Type Attri ...

  2. 进化论VS中性突变理论

    进化论VS中性突变理论 查尔斯·罗伯特·达尔文(英语:CharlesRobert Darwin,1809年2月12日-1882年4月19日),英国生物学家,其“进化论”被列为19世纪自然科学的三大发现 ...

  3. 我的编码习惯 - Controller规范

    原文出处: 晓风轻 请先阅读我这2篇文章 程序员你为什么这么累? 和 我的编码习惯 - 接口定义. 第一篇文章中,我贴了2段代码,第一个是原生态的,第2段是我指定了接口定义规范,使用AOP技术之后最终 ...

  4. Windows下php,mysql,apache相关安装与配置,完善中…

    PHP 的安装 由于php是一个zip文件(非install版),安装较为简单解压就行.把解压的 php5.2.1-Win32重命名为 php5.并复制到安装盘目录下.例如安装路径为 c:\php5 ...

  5. webApp 页面适配布局

    webApp 页面布局 1. 流式布局 概念: 流式布局是页面元素宽度按照屏幕分辨率进行适配调整,但是整体布局不变. 设计方法: 布局都是通过百分比来定义宽度,但是高度大都是用px固定的. 弊端: 虽 ...

  6. windows10安装配置scikit-learn步骤

    安装python-2.7.13.msi(到C:\Python27),把C:\Python27和C:\Python27\Scripts添加到系统环境变量 安装numpy:下载numpy-1.11.3+m ...

  7. 安装python包时遇到"error: Microsoft Visual C++ 9.0 is required"的简答

    简答 在Windows下用pip安装Scrapy报如下错误, error: Microsoft Visual C++ 9.0 is required (Unable to find vcvarsall ...

  8. 20155222 2016-2017-2 《Java程序设计》第7周学习总结

    20155222 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 使用基于方法的语法在 Enumerable 类中调用 Where 方法时(像在 LINQ t ...

  9. 实验一 《网络对抗技术》逆向及Bof技术

  10. thinkphp 带条件分页查询

    thinkphp 带条件分页查询:form表单传值时候,method='get'. 用 get 传值