vue過濾器的使用

wua_wua2012 發布于2019-08-22 16:37 / 1511人閱讀

摘要：過濾器過濾器實質不改變原始數據，只是對數據進行加工處理后返回過濾后的數據再進行調用處理，這點要切記過濾器的定義和使用定義全局定義和局部定義兩種方式全局注冊局部注冊使用在雙花括號中使用管道符隔開，或者表達式以上支持過濾器的使用添加前綴還可

vue過濾器

過濾器實質不改變原始數據，只是對數據進行加工處理后返回過濾后的數據再進行調用處理，這點要切記

過濾器的定義和使用 定義

全局定義和局部定義兩種方式

// 全局注冊
Vue.filter("toRMB", function (value) {
  return `￥${value}`
})

new Vue({
  el: "#app",
  data: {
    money: 826.26,
  },

  // 局部注冊
  filters: {
    toFixed: function(money) {
      return money.toFixed(1)
    },
  },
)}

使用

在雙花括號中使用管道符(pipeline) |隔開，或者v-bind 表達式(v2.1.0以上支持)

過濾器的使用-添加前綴
{{352.11 | toRMB}}
{{657 | toRMB}}
{{657.22 | toFixed }}
{{money | toFixed }}

還可以鏈式使用，注意先后的順序，如下面的先添加￥符號再進行小數位變換將會出錯，因此要注意先后順序

{{ money | toFixed | toRMB }}

過濾器函數的多層參數

過濾器函數是指接收的參數不止value這一個，還可以添加length和suffix參數

多重參數
{{text}}
{{text | readMore(20,"...")}}

new Vue({
  el: "#app",
  data: {
    text: "hello I love u, will u love me ?",
  },
  filters: {
    readMore: function (value,length,suffix) {
      console.log(arguments);
      return value.substr(0,length) + suffix;
    },
  }
})

完整DEMO請戳

其他一些例子

收集了一些常見的使用場景，多加聯系

把JS值轉換為JSON字符串

從數組對象中提取屬性

根據索引返回元素

返回給定隊列的最小值

打亂元素

返回數組的首項值

返回數組的尾項值

返回數組的拷貝

移除數組中的重復項

將一段文字放到字符后面

重復字符片段n次

參考

How to Create Filters in Vue.js with Examples

VUE Guide

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94507.html

Vue學習筆記（一）

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

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

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

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

摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關于事件的指令，這里詳細學習一下事件的相關知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數據綁定，顯示在頁面中，也稱為語法。一、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學習

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

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

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

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

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

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