Vue過濾器

jhhfft 發(fā)布于2019-08-26 12:12 / 2274人閱讀

摘要：過濾器學習討論我是一個愛學習的人，學習各種技術使用來對指定的元素進行過濾，中傳遞的參數(shù)即是表達式中的第一個值，同時還可以傳遞多個參數(shù)討論學習我是一個愛學習的人，學習各種技術同時可以進行多次過濾討論學習我是一個愛學習的人，學習各種技術實

Vue過濾器



    
        
        
        
        
    
    
        
        
            {{msg |msgFormat}}

使用Vue.filter()來對指定的元素進行過濾，function中傳遞的參數(shù)即是el表達式中的第一個值，

同時還可以傳遞多個參數(shù)



    
        
        
        
        
    
    
        
        
            {{msg |msgFormat("討論")}}

同時可以進行多次過濾



    
        
        
        
        
    
    
        
        
            {{msg |msgFormat("討論")|test}}

實際中經常會使用到的實例

  Vue.filter("dateFormat", function (dateStr, pattern = "") {
      // 根據(jù)給定的時間字符串，得到特定的時間
      var dt = new Date(dateStr)

      //   yyyy-mm-dd
      var y = dt.getFullYear()
      var m = dt.getMonth() + 1
      var d = dt.getDate()

      // return y + "-" + m + "-" + d



      if (pattern.toLowerCase() === "yyyy-mm-dd") {
        return `${y}-${m}-$qoyqs8suu2u`
      } else {
        var hh = dt.getHours()
        var mm = dt.getMinutes()
        var ss = dt.getSeconds()

        return `${y}-${m}-$qoyqs8suu2u ${hh}:${mm}:${ss}`
      }
    })

同時如果頁面中存在兩個Vue對象，針對每個對象可以定義私有過濾器，如下

    // 如何自定義一個私有的過濾器（局部）
    var vm2 = new Vue({
      el: "#app2",
      data: {
        dt: new Date()
      },
      methods: {},
      filters: { // 定義私有過濾器    過濾器有兩個 條件  【過濾器名稱 和 處理函數(shù)】
        // 過濾器調用的時候，采用的是就近原則，如果私有過濾器和全局過濾器名稱一致了，這時候 優(yōu)先調用私有過濾器
        dateFormat: function (dateStr, pattern = "") {
          // 根據(jù)給定的時間字符串，得到特定的時間
          var dt = new Date(dateStr)

          //   yyyy-mm-dd
          var y = dt.getFullYear()
          var m = (dt.getMonth() + 1).toString().padStart(2, "0")
          var d = dt.getDate().toString().padStart(2, "0")

          if (pattern.toLowerCase() === "yyyy-mm-dd") {
            return `${y}-${m}-$qoyqs8suu2u`
          } else {
            var hh = dt.getHours().toString().padStart(2, "0")
            var mm = dt.getMinutes().toString().padStart(2, "0")
            var ss = dt.getSeconds().toString().padStart(2, "0")

            return `${y}-${m}-$qoyqs8suu2u ${hh}:${mm}:${ss} ~~~~~~~`
          }
        }
      },

云服務器 GPU云服務器 Vue_Vue Vue 過濾器 vue3 學習筆記 (五)——vue3

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/108224.html

Vue學習筆記（一）

摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關于事件的指令，這里詳細學習一下事件的相關知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數(shù)據(jù)綁定，顯示在頁面中，也稱為語法。一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護。 Vue有以下特點：是一個構建用戶界面的框架是一...

baoxl 2019-08-30 13:47 評論0 收藏0
Vue學習筆記（一）

摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關于事件的指令，這里詳細學習一下事件的相關知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數(shù)據(jù)綁定，顯示在頁面中，也稱為語法。一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護。 Vue有以下特點：是一個構建用戶界面的框架是一...

liukai90 2019-08-21 17:05 評論0 收藏0
Vue學習筆記（一）

摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關于事件的指令，這里詳細學習一下事件的相關知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數(shù)據(jù)綁定，顯示在頁面中，也稱為語法。一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護。 Vue有以下特點：是一個構建用戶界面的框架是一...

rollback 2019-08-01 17:49 評論0 收藏0
Vue.nextTick，Vue.set，Vue.delete，Vue.filter學習

摘要：用法在下次更新循環(huán)結束之后執(zhí)行延遲回調。只要觀察到數(shù)據(jù)變化，將開啟一個隊列，并緩沖在同一事件循環(huán)中發(fā)生的所有的數(shù)據(jù)改變。如果對象是響應式的，確保刪除能觸發(fā)更新視圖。 Vue.nextTick([callback,context]) 參數(shù)：{Function}[callback]。{Object}[context]。用法：在下次DOM更新循環(huán)結束之后執(zhí)行延遲回調。在修改數(shù)據(jù)之后立即使用這...

junnplus 2019-08-23 13:54 評論0 收藏0
Vue2.0中Filter的使用問題

摘要：里，不再有自帶的過濾器，需要自己定義過濾器在中內置了幾種實用的過濾器函數(shù)如，但在中這些方法都被廢除了需要自己定義過濾器。所以我們需要進行改寫標題哈哈 vue2.0里，不再有自帶的過濾器，需要自己定義過濾器在 Vue1.0 中內置了幾種實用的過濾器函數(shù)如 uppercase ，但在 Vue2.0 中這些方法都被廢除了需要自己定義過濾器。定義的方法：注冊一個自定義過濾器，它接收兩個參數(shù)...

why_rookie 2019-08-20 16:56 評論0 收藏0
理清楚Vue的結構

摘要：的使用場景在中通過引入在中，由于配置有處理各種文件的，所以可以用引入指令簡單值，數(shù)組，對象，數(shù)組中對象數(shù)組，對象自定義全局指令自定義指令名字指令生效周期配置對象被綁定的那個元素的原生對象一旦綁上馬上調用同上元素插入到之后再 1.Vue的使用場景： * 在html中通過script引入 * 在webpack中，由于配置有處理各種文件的loader，所以可以用import引入 2.Vu...

terro 2019-08-23 15:19 評論0 收藏0