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之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
javascript eval和JSON之间的联系
Dec 31 Javascript
多浏览器支持的右下角浮动窗口
Apr 01 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
vue插件实现v-model功能
Sep 10 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
晶体管来复再生式二管收音机
2021/03/02 无线电
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
Python中super关键字用法实例分析
2015/05/28 Python
Python模拟百度登录实例详解
2016/01/20 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
区域总监的岗位职责
2013/11/21 职场文书
优秀大学生的自我评价
2014/01/16 职场文书
副厂长岗位职责
2014/02/02 职场文书
青年志愿者活动总结
2014/04/26 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
三年级学生期末评语
2014/12/26 职场文书
火烧圆明园观后感
2015/06/03 职场文书
九年级历史教学反思
2016/02/19 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js