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

一、过滤器介绍

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>

测试结果：

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

{{ message | filterA | filterB }}

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

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

【 代码示例 】

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

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

测试结果：

【 知识拓展 】

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

① 语法：

arrayObject.slice(start,end)

② 参数：

③ 返回值 ：

返回一个新的数组，包含从 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>

测试结果：

注意：

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

【 知识拓展 】

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

① 语法：

str.padStart(targetLength [, padString])

② 参数：

③ 返回值：

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

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

<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 过滤器时间格式化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue.js实现格式化时间并每秒更新显示功能示例

    vue.js实现格式化时间并每秒更新显示功能示例

    本文实例讲述了vue.js实现格式化时间并每秒更新显示功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=

  • vue时间格式化实例代码

    整理文档,搜刮出一个vue时间格式化实例代码,稍微整理精简一下做下分享. export function formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h

  • vue中格式化时间过滤器代码实例

    本文实例为大家分享了vue格式化时间过滤器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/vue"></script> <

  • Vue filter格式化时间戳时间成标准日期格式的方法

    调用实例:yyyy-MM-dd或者yyyy-MM-dd hh:mm:ss进行格式 <div>{{data | dataFormat('yyyy-MM-dd hh:mm:ss')}}</div> 代码: import Vue from 'vue' Vue.filter('dataFormat', function (value, fmt) { let getDate = new Date(value); let o = { 'M+': getDate.getMonth() + 1,

  • 详解vue2.0的Element UI的表格table列时间戳格式化

    这两天学习了vue2.0的Element UI的表格table列时间戳格式化,所以,今天添加一点小笔记. 表格属性 <el-table :data="tableData" v-loading.body="loading" border @selection-change="selectionChange" style="width: 100%"> <el-table-column prop="cre

  • Vue自定义过滤器格式化数字三位加一逗号实现代码

    Vue自定义过滤器格式化数字三位加一逗号实现代码

    前端处理一些金额,数字类的数据要求按照固定的格式显示,比如9,527,025,或者带有小数(如1,587.23)仍要三位一断.有些话也不必多说,既然要求如此,实现呗. 作为前端主流框架之一的Vue,类似的功能肯定都有人写的很完善了.我呢,最讨厌不动脑筋去网上找现成的,所以我自己写了一个.话不多说,先放效果图再贴代码(为了展现思路,我面向过程写的,另外这个是针对保留两位小数的数字进行过滤,因为保留整数的太简单了). <!DOCTYPE html> <html> <head>

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

    一.过滤器介绍 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由 管道 符号指示: <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId">

  • vue中的过滤器实例代码详解

    过滤器 1.过滤器规则 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方: 双花括号插值{{}}和  v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示: <!-- 在双花括号中 --> {{ name | Upper }} <!-- 在 `v-bind` 中 --> <div v-bind:id="martin | Upper

  • VUE中filters过滤器的两种用法实例

    VUE中filters过滤器的两种用法实例

    目录 前言 一.全局过滤器 全局过滤器之单一挂载 全局过滤器之批量挂载 二.组件过滤器 附:过滤器中传入多个参数 总结 前言 Vue.js 允许我们自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号({undefined{ }})插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示. <!-- 在双花括号中 --> <div>{{ message | capitaliz

  • Vue中的过滤器(filter)详解

    目录 过滤器使用位置 全局过滤器.局部过滤器 全局过滤器: 局部过滤器: 过滤器中传入多个参数: 多个过滤器串联: 官方文档:https://cn.vuejs.org/v2/guide/filters.html 在官方文档中,是这样说明的:可被用于一些常见的文本格式化,vue中过滤器的作用可被用于一些常见的文本格式化.(也就是修饰文本,但是文本内容不会改变) 个人觉得称它为加工车间会更加贴切一些,过滤器可以用来筛选出符合条件的,丢弃不符合条件的:加工车间既可以筛选,又可以对筛选出来的进行加工.

  • vue中js判断长时间不操作界面自动退出登录(推荐)

    需求说明,后台有做半个小时不请求接口的话返回标识退出登录,但是要请求接口才行,现在要实现前端用js判断半个小时不操作界面的话自动跳转到登录页面. 创建一个.js文件,在main.js引入此js(vue框架) 在登录成功的时候保存当前时间localStorage.setItem("lastTime",new Date().getTime()); 然后在点击的时候更新这个时间 var lastTime = new Date().getTime(); var currentTime = ne

  • vue中使用过滤器filters的this为undefined的问题

    目录 使用过滤器filters的this为undefined vue filter过滤器的用法 使用过滤器filters的this为undefined vue中的过滤器更偏向于对文本数据的转化,而不能依赖this上下文,如果需要使用到上下文this我们应该使用computed计算属性的或者一个method方法 vue filter过滤器的用法 {undefined{ args | filterFun }} |是管道符 用法如下 {{ time | formatDate }} 过滤器中 filte

  • vue 中常见的时间格式转换

    项目中后台返回的时间有多种形式,时间戳.ISO标准时间格式等,我们需要转化展示成能看的懂得时间格式: 1.将2020-06-27T14:20:27.000000Z 时间格式转换成 2020-06-27 14:20:27 可以将方法定义为全局过滤器,或全局方法方便引用 Vue.filter('format', function(date) { var json_date = new Date(date).toJSON(); return new Date(new Date(json_date) +

  • vue过滤器实现日期格式化的案例分析

    说明 今天将要介绍的是vue中的过滤器,并且将实现一个日期格式化的小案例. 大家都知道,我们获取当前日期可以通过Date对象获取.下面我将获取当前时间并打印出来. console.log(new Date()); 我们获取的是一个标准时间,控制台的输出如下所示. 在实际项目开发中,我们通常获取标准时间后不是直接拿来使用,而是要进行一些操作然后将它显示在页面中,我们将这些操作称作时间格式化. 过滤器 在vue中,我们可以使用过滤器来进行时间格式化.它的写法如下: // Vue.filter(过滤器

  • 关于Vue中过滤器的必懂小知识

    关于Vue中过滤器的必懂小知识

    目录 前言 什么是过滤器 如何使用过滤器 全局过滤器 局部过滤器 过滤器可以串联 总结 前言 大家好,今天来分享下Vue中的过滤器小知识 什么是过滤器 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持). 如何使用过滤器 全局过滤器 本案例是过滤价格中的￥和元 示例 ￥1999.00元 定义一个capitalize方法,传入value值 如果value为空返回空字符串 否则就叠加字符串"

随机推荐