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 相关文章推荐
用jscript实现新建和保存一个word文档
Jun 15 Javascript
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
jQuery实现的Div窗口震动特效
Jun 09 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
Openlayers学习之加载鹰眼控件
Sep 28 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/12/21 PHP
PHP 的几个配置文件函数
2006/12/21 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
python统计文本文件内单词数量的方法
2015/05/30 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
基于python实现学生管理系统
2018/10/17 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
Android面试题及答案
2015/09/04 面试题
2013届毕业生求职信范文
2013/11/20 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
作文评语怎么写
2014/12/25 职场文书
保卫工作个人总结
2015/03/03 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
Mysql数据库命令大全
2021/05/26 MySQL