快捷導(dǎo)航

vue中的過(guò)濾器及其時(shí)間格式化問(wèn)題

更新時(shí)間：2020年04月09日 14:07:46 作者：揚(yáng)帆向海

這篇文章主要介紹了vue中的過(guò)濾器及其時(shí)間格式化,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、過(guò)濾器介紹

Vue.js 允許你自定義過(guò)濾器，可被用于一些常見(jiàn)的文本格式化。過(guò)濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式 (后者從 2.1.0+ 開(kāi)始支持)。過(guò)濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由管道符號(hào)指示：

<!-- 在雙花括號(hào)中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

二、全局過(guò)濾器

在創(chuàng)建 Vue 實(shí)例之前全局定義過(guò)濾器

【代碼示例】

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>過(guò)濾器</title>
  <script src="js/vue.js"></script>
</head>

<body>
  <div id="app">
    <input type="text" v-model="msg">
    <div>{{ msg | strUpper }}</div>
  </div>
  <script>
    // 定義一個(gè)全局過(guò)濾器，把字符串的第一個(gè)字符轉(zhuǎn)換為大寫
    Vue.filter('strUpper', function (str) {
      return str.charAt(0).toUpperCase() + str.slice(1)
    })
    var vm = new Vue({
      el: '#app',
      data: {
        msg: ''
      }
    })
  </script>
</body>

</html>

測(cè)試結(jié)果：

在這里插入圖片描述

過(guò)濾器可以串聯(lián)。在一個(gè)插值表達(dá)式中可以使用多個(gè)過(guò)濾器，過(guò)濾器之間用管道符隔開(kāi)，過(guò)濾器從左到右的順序進(jìn)行執(zhí)行。

{{ message | filterA | filterB }}

在這個(gè)例子中，filterA 被定義為接收單個(gè)參數(shù)的過(guò)濾器函數(shù)，表達(dá)式 message的值將作為參數(shù)傳入到函數(shù)中。然后繼續(xù)調(diào)用同樣被定義為接收單個(gè)參數(shù)的過(guò)濾器函數(shù) filterB，將 filterA 的結(jié)果傳遞到 filterB 中。

調(diào)用第一個(gè)過(guò)濾器會(huì)使輸入的字符串第一個(gè)字符轉(zhuǎn)成大寫，調(diào)用第二個(gè)過(guò)濾器替換字符串中的空格為逗號(hào)。

【代碼示例】

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

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

測(cè)試結(jié)果：

在這里插入圖片描述

【知識(shí)拓展】

slice() 方法可從已有的數(shù)組中返回選定的元素。

① 語(yǔ)法：

arrayObject.slice(start,end)

② 參數(shù)：

③ 返回值：

返回一個(gè)新的數(shù)組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。

三、局部過(guò)濾器

定義一個(gè)局部的過(guò)濾器，格式化當(dāng)前時(shí)間

【代碼示例】

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="winowh=device-winowh, initial-scale=1.0">
  <title>過(guò)濾器學(xué)習(xí)2</title>
  <script src="js/vue.js"></script>
</head>

<body>
  <div id="app">
    <div>當(dāng)前時(shí)間是： {{ dateTime }}</div>
    <div>格式化后的時(shí)間是： {{ dateTime | dateFormat }}</div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        dateTime: new Date(),
      },
      // 定義一個(gè)局部的過(guò)濾器，格式化當(dāng)前時(shí)間
      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')
          // 過(guò)濾器中要有返回值
          return `${y}-${m}-$wppm3vysvbp ${hh}:${mm}:${ss}`
        }
      }
    })
  </script>
</body>

</html>

測(cè)試結(jié)果：

在這里插入圖片描述

注意：

當(dāng)有兩個(gè)名稱相同的全局過(guò)濾器和局部過(guò)濾器的時(shí)候，會(huì)以就近原則進(jìn)行調(diào)用過(guò)濾器，局部過(guò)濾器的優(yōu)先級(jí)高于全局過(guò)濾器。

【知識(shí)拓展】

padStart() 可以在字符串的開(kāi)頭進(jìn)行字符補(bǔ)全。

① 語(yǔ)法：

str.padStart(targetLength [, padString])

② 參數(shù)：

③ 返回值：

在原字符串開(kāi)頭填充指定的填充字符串直到目標(biāo)長(zhǎng)度所形成的新字符串。

借鑒網(wǎng)上的常用方法格式化時(shí)間

<body>
  <div id="app">
    <div>當(dāng)前時(shí)間是： {{ dateTime }}</div>
    <div>格式化后的時(shí)間是： {{ 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(), // 小時(shí)
        "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(),
      },
      // 定義一個(gè)局部的過(guò)濾器，格式化當(dāng)前時(shí)間
      filters: {
        dateFormat: (dateTime, fmt) => {
          var dt = new Date(dateTime)
          return dt.format(fmt)
        }
      },
    })
  </script>
</body>

總結(jié)

到此這篇關(guān)于vue中的過(guò)濾器及其時(shí)間格式化問(wèn)題的文章就介紹到這了,更多相關(guān)vue 過(guò)濾器時(shí)間格式化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: