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 相关文章推荐
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
Javascript writable特性介绍
Feb 27 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
JS实现简单tab选项卡切换
Oct 25 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
ajax缓存问题解决途径
2006/12/06 PHP
解析PHP的session过期设置
2013/06/29 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
Python正则表达式的使用范例详解
2014/08/08 Python
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
Tornado 多进程实现分析详解
2018/01/12 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
Flask之flask-script模块使用
2018/07/26 Python
Python爬取成语接龙类网站
2018/10/19 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
Django数据统计功能count()的使用
2020/11/30 Python
Etam德国:内衣精品店
2019/08/25 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
人力资源管理专业应届生求职信
2013/09/28 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
如何理解python接口自动化之logging日志模块
2021/06/15 Python