详解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 相关文章推荐
js获取select标签选中值的两种方式
Jan 09 Javascript
jquery隔行换色效果实现方法
Jan 15 Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 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实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
PHP7常量数组用法分析
2016/09/26 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
使用python在本地电脑上快速处理数据
2017/06/22 Python
python对日志进行处理的实例代码
2018/10/06 Python
python实现广度优先搜索过程解析
2019/10/19 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
C#笔试题和英文面试题
2013/02/07 面试题
护士感人事迹
2014/05/01 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle