Vue2.0系列之过滤器的使用


Posted in Javascript onMarch 01, 2018

vue2.0已经废弃了过滤器,需要自定义过滤器,用于一些常见的文本格式化。

感觉超级好用!!

过滤器可以用在两个地方:双花括号插值 和 v-bind表达式。

过滤器应该被添加在JavaScript表达式的尾部,由管道符指示。

一、注册全局过滤器

注意事项:
1、全局方法Vue.filter()注册一个自定义过滤器,必须放在vue实例化前面
2、过滤器函数始终以表达式的值作为第一个参数,带引号的参数视为字符串,而不带引号的参数按表达式计算
3、可以设置两个过滤器参数,前提这两个过滤器处理的不冲突
4、用户从input输入的数据在会传到model之前也可以先处理

案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>过滤器</title>
</head>
<body>

<div id="app">
  <!-- 首字符串大写 -->
  <div>首字母大写过滤器:{{str | upcase}}</div>
  <!-- 给过滤器传入参数 -->
  <p>求和过滤器:{{message | sum(10,20)}}</p> 
</div>

<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
    //全局方法 Vue.filter()注册一个自定义过滤器,必须放在Vue实例化前面
    // 注册一个首字母大写的过滤器
    Vue.filter("upcase", function(value) { 
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    });
    // 全局注册一个求和过滤器
    Vue.filter('sum', function (value, a, b) {
      return value + a + b;
    });

    var demo = new Vue({
      el: "#app",
      data: {
        str:'hello',
        message:12
      }
    });
</script>
</body>
</html>

案例效果:

Vue2.0系列之过滤器的使用

二、注册在实例化内部

过滤器也可以注册在实例内部,仅在使用它的实例里面注册。

根据以上案例改编:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<div id="app">
  <!-- 首字符串大写 -->
  <div>首字母大写过滤器:{{str | upcase}}</div>
  <!-- 给过滤器传入参数 -->
  <p>求和过滤器:{{message | sum(10,20)}}</p> 
</div>

<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
    var demo = new Vue({
      el: "#app",
      data: {
        str:'hello',
        message:12
      },
      filters: {
        upcase:function(value){
          if (!value) return ''
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1)
        },
        sum:function(value, a, b){
          return value + a + b;
        }
      }
    });

</script>
</body>
</html>

效果:

Vue2.0系列之过滤器的使用

三、常见过滤器

根据时间戳转化成时间格式:mm-dd hh:tt

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<div id="app">
  <!-- 将时间戳转化为时间 -->
  <h1>根据时间戳转化为时间:{{ str | formateTime}}</h1>
</div>

<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
    var demo = new Vue({
      el: "#app",
      data: {
        str:1517568434324,
      },
      filters: {
        formateTime:function(nS){
          return ((new Date(nS).getMonth()+1)<10?'0'+(new Date(nS).getMonth()+1):(new Date(nS).getMonth()+1)) + '-' + (new Date(nS).getDate()<10?'0'+new Date(nS).getDate():new Date(nS).getDate()) + ' ' + (new Date(nS).getHours()<10?'0'+new Date(nS).getHours():new Date(nS).getHours()) + ':' + (new Date(nS).getMinutes()<10?'0'+new Date(nS).getMinutes():new Date(nS).getMinutes())
        }
      }
    });

</script>
</body>
</html>

案例效果:

Vue2.0系列之过滤器的使用

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

Javascript 相关文章推荐
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 #Javascript
vue.js 获取select中的value实例
Mar 01 #Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 #Javascript
在vue中封装可复用的组件方法
Mar 01 #Javascript
JavaScript判断日期时间差的实例代码
Mar 01 #Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 #Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 #Javascript
You might like
ThinkPHP的L方法使用简介
2014/06/18 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
ie 调试javascript的工具
2009/04/29 Javascript
javascript 面向对象编程 function也是类
2009/09/17 Javascript
js表格分页实现代码
2009/09/18 Javascript
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
简单实现js鼠标跟随效果
2020/08/02 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
python实现flappy bird小游戏
2018/12/24 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
python实现UDP协议下的文件传输
2020/03/20 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
北京天润融通.net面试题笔试题
2012/02/20 面试题
Java语言的优势
2015/01/10 面试题
大学生求职中的自我评价
2013/10/01 职场文书
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
导游词之太原天龙山
2020/01/02 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python