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 相关文章推荐
JS 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
js计时事件实现圆形时钟
Mar 25 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
如何在 Vue 表单中处理图片
Jan 26 Vue.js
微信小程序保存图片到相册权限设置
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
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
python 将大文件切分为多个小文件的实例
2019/01/14 Python
提升python处理速度原理及方法实例
2019/12/25 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
详解KMP算法以及python如何实现
2020/09/18 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
家长会学生家长演讲稿
2013/12/29 职场文书
关于赌博的检讨书
2014/01/08 职场文书
雪山饭庄的创业计划书范文
2014/01/18 职场文书
幼儿园元旦活动感言
2014/03/02 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
《长相思》听课反思
2014/04/10 职场文书
企业职业病防治方案
2014/05/29 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
python 离散点图画法的实现
2022/04/01 Python