详解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 相关文章推荐
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
webpack入门+react环境配置
Feb 08 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
vue多页面开发和打包正确处理方法
Apr 20 Javascript
详解js类型判断
May 22 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
php zip文件解压类代码
2009/12/02 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
js倒计时抢购实例
2015/12/20 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
python中使用正则表达式的连接符示例代码
2017/10/10 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
小区门卫工作职责
2013/12/14 职场文书
村优秀党员事迹材料
2014/01/15 职场文书
公司新年寄语
2014/04/04 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
电力工程合作意向书
2015/05/11 职场文书
刑事法律意见书
2015/06/04 职场文书
小学班主任研修日志
2015/11/13 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
PyMongo 查询数据的实现
2021/06/28 Python
基于redis+lua进行限流的方法
2022/07/23 Redis