vue中的过滤器及其时间格式化问题


Posted in Javascript onApril 09, 2020

一、过滤器介绍

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由 管道 符号指示:

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

二、全局过滤器

在创建 Vue 实例之前全局定义过滤器

【 代码示例 】

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>过滤器</title>
  <script src="js/vue.js"></script>
</head>

<body>
  <div id="app">
    <input type="text" v-model="msg">
    <div>{{ msg | strUpper }}</div>
  </div>
  <script>
    // 定义一个全局过滤器,把字符串的第一个字符转换为大写
    Vue.filter('strUpper', function (str) {
      return str.charAt(0).toUpperCase() + str.slice(1)
    })
    var vm = new Vue({
      el: '#app',
      data: {
        msg: ''
      }
    })
  </script>
</body>

</html>

测试结果:

vue中的过滤器及其时间格式化问题

过滤器可以串联。在一个插值表达式中可以使用多个过滤器,过滤器之间用管道符 隔开,过滤器从左到右的顺序进行执行。

{{ message | filterA | filterB }}

在这个例子中,filterA 被定义为接收单个参数的过滤器函数,表达式 message的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB,将 filterA 的结果传递到 filterB 中。

调用第一个过滤器会使输入的字符串第一个字符转成大写,调用第二个过滤器替换字符串中的空格为逗号。

【 代码示例 】

<div>{{ msg | strUpper | strReplace }}</div>

Vue.filter('strReplace', function (str) {
  return str.replace(/ /g, ',')
})

测试结果:

vue中的过滤器及其时间格式化问题

【 知识拓展 】

slice() 方法可从已有的数组中返回选定的元素。

① 语法:

arrayObject.slice(start,end)

② 参数:

vue中的过滤器及其时间格式化问题

③ 返回值 :

返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

三、局部过滤器

定义一个局部的过滤器,格式化当前时间

【 代码示例 】

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="winowh=device-winowh, initial-scale=1.0">
  <title>过滤器学习2</title>
  <script src="js/vue.js"></script>
</head>

<body>
  <div id="app">
    <div>当前时间是: {{ dateTime }}</div>
    <div>格式化后的时间是: {{ dateTime | dateFormat }}</div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        dateTime: new Date(),
      },
      // 定义一个局部的过滤器,格式化当前时间
      filters: {
        dateFormat: (dateTime) => {
          var now = new Date(dateTime)
          var y = now.getFullYear()
          var m = (now.getMonth() + 1).toString().padStart(2, '0')
          var d = now.getDate().toString().padStart(2, '0')
          var hh = now.getHours().toString().padStart(2, '0')
          var mm = now.getMinutes().toString().padStart(2, '0')
          var ss = now.getSeconds().toString().padStart(2, '0')
          // 过滤器中要有返回值
          return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        }
      }
    })
  </script>
</body>

</html>

测试结果:

vue中的过滤器及其时间格式化问题

注意:

当有两个名称相同的全局过滤器和局部过滤器的时候,会以就近原则进行调用过滤器,局部过滤器的优先级高于全局过滤器。

【 知识拓展 】

padStart() 可以在字符串的开头进行字符补全。

① 语法:

str.padStart(targetLength [, padString])

② 参数:

vue中的过滤器及其时间格式化问题

③ 返回值:

在原字符串开头填充指定的填充字符串直到目标长度所形成的新字符串。

借鉴网上的常用方法格式化时间

<body>
  <div id="app">
    <div>当前时间是: {{ dateTime }}</div>
    <div>格式化后的时间是: {{ dateTime | dateFormat('yyyy-MM-dd hh:mm:ss') }}</div>
  </div>
  <script>
    Date.prototype.format = function (format) {
      var dateMap = {
        "M+": this.getMonth() + 1, // 月份
        "d+": this.getDate(), // 日
        "h+": this.getHours(), // 小时
        "m+": this.getMinutes(), // 分
        "s+": this.getSeconds(), // 秒
        "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
        "S": this.getMilliseconds() // 毫秒
      };
      if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp
        .$1.length));
      for (var k in dateMap)
        if (new RegExp("(" + k + ")").test(format)) format = format.replace(RegExp.$1, (RegExp.$1.length ==
          1) ? (dateMap[k]) : (("00" + dateMap[k]).substr(("" + dateMap[k]).length)));
      return format;
    }
    var vm = new Vue({
      el: '#app',
      data: {
        dateTime: new Date(),
      },
      // 定义一个局部的过滤器,格式化当前时间
      filters: {
        dateFormat: (dateTime, fmt) => {
          var dt = new Date(dateTime)
          return dt.format(fmt)
        }
      },
    })
  </script>
</body>

总结

到此这篇关于vue中的过滤器及其时间格式化问题的文章就介绍到这了,更多相关vue 过滤器时间格式化内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 Javascript
微信小程序保存图片到相册权限设置
Apr 09 #Javascript
微信小程序仿通讯录功能
Apr 09 #Javascript
vue cli4下环境变量和模式示例详解
Apr 09 #Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 #Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 #Javascript
加速vue组件渲染之性能优化
Apr 09 #Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 #Javascript
You might like
php字符串截取问题
2006/11/28 PHP
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
PHP面向对象法则
2012/02/23 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
Python数据结构之Array用法实例
2014/10/09 Python
python根据京东商品url获取产品价格
2015/08/09 Python
python简单读取大文件的方法
2016/07/01 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
.NET现在共支持多少种语言
2014/02/26 面试题
夜班门卫岗位职责
2013/12/09 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
学术诚信承诺书
2014/05/26 职场文书
见习期个人总结
2015/03/05 职场文书
科级干部培训心得体会
2016/01/06 职场文书
Python自动化测试PO模型封装过程详解
2021/06/22 Python
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL