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链式操作的正确使用方法
Jan 06 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
WebPack基础知识详解
Jan 16 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
详谈Node.js之操作文件系统
Aug 29 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
validform表单验证的实现方法
Mar 08 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
js 数据类型判断的方法
Dec 03 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
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
PHP之header函数详解
2021/03/02 PHP
HTML DOM的nodeType值介绍
2011/03/31 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
python实现图片批量剪切示例
2014/03/25 Python
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
深入了解Python数据类型之列表
2016/06/24 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
Python之列表实现栈的工作功能
2019/01/28 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
python进度条显示之tqmd模块
2020/08/22 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
Python 列表反转显示的四种方法
2020/11/16 Python
苹果香港官方商城:Apple香港
2016/09/14 全球购物
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
汉语言文学毕业生求职信
2013/10/01 职场文书
小学毕业家长寄语
2014/01/19 职场文书
技能竞赛活动方案
2014/02/21 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
三严三实学习心得体会
2014/10/13 职场文书
社会实践活动总结
2015/02/05 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书