详解Vue自定义过滤器的实现


Posted in Javascript onJanuary 10, 2017

一 自定义过滤器(注册在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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之ESC(第二类混淆)
May 06 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 #Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 #Javascript
微信小程序 地图map详解及简单实例
Jan 10 #Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 #Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 #Javascript
jquery 正整数数字校验正则表达式
Jan 10 #Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 #Javascript
You might like
PHP调用Webservice实例代码
2011/07/29 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
php批量修改表结构实例
2017/05/24 PHP
PHP crc32()函数讲解
2019/02/14 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
使用SAE部署Python运行环境的教程
2015/05/05 Python
python统计cpu利用率的方法
2015/06/02 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
四年级数学教学反思
2014/02/02 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
成绩单家长评语大全
2014/04/16 职场文书
红色旅游心得体会
2014/09/03 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
永远是春天观后感
2015/06/12 职场文书
家属联谊会致辞
2015/07/31 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
初三英语教学反思
2016/02/15 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers