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 相关文章推荐
FireFox JavaScript全局Event对象
Jun 14 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 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
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
Redis构建分布式锁
2017/03/28 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
JavaScript 动态创建VML的方法
2009/10/14 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
Python实现自动发送邮件功能
2021/03/02 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
Django 路由层URLconf的实现
2019/12/30 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
病媒生物防治方案
2014/05/13 职场文书
施工单位安全责任书
2014/07/24 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
体育运动会广播稿
2014/10/05 职场文书
领导班子整改措施
2014/10/24 职场文书
同意迁入证明模板
2014/10/26 职场文书
社区好人好事材料
2014/12/26 职场文书
工作简报格式范文
2015/07/21 职场文书
初中团委工作总结
2015/08/13 职场文书
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL