详解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 相关文章推荐
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
js清理Word格式示例代码
Feb 13 Javascript
angularJS 入门基础
Feb 09 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
Bootstrap table使用方法总结
May 10 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
Element Input组件分析小结
Oct 11 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 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程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
提高网站信任度的技巧
2008/10/17 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
node.js实现端口转发
2016/04/14 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
详解python进行mp3格式判断
2016/12/23 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
Python自动登录QQ的实现示例
2020/08/28 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
Python中Qslider控件实操详解
2021/02/20 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
酒店管理毕业生自荐信
2013/10/24 职场文书
护理中职生求职信范文
2014/02/24 职场文书
车辆工程专业求职信
2014/06/14 职场文书
英文慰问信
2015/02/14 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
公司门卫岗位职责
2015/04/13 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
Go语言安装并操作redis的go-redis库
2022/04/14 Golang