vue過濾器的使用

wua_wua2012 發(fā)布于2019-08-22 16:37 / 1521人閱讀

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

vue過濾器

過濾器實質(zhì)不改變原始數(shù)據(jù)，只是對數(shù)據(jù)進行加工處理后返回過濾后的數(shù)據(jù)再進行調(diào)用處理，這點要切記

過濾器的定義和使用 定義

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

// 全局注冊
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 }}

還可以鏈?zhǔn)绞褂?，注意先后的順序，如下面的先添加￥符號再進行小數(shù)位變換將會出錯，因此要注意先后順序

{{ money | toFixed | toRMB }}

過濾器函數(shù)的多層參數(shù)

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

多重參數(shù)
{{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請戳

其他一些例子

收集了一些常見的使用場景，多加聯(lián)系

把JS值轉(zhuǎn)換為JSON字符串

從數(shù)組對象中提取屬性

根據(jù)索引返回元素

返回給定隊列的最小值

打亂元素

返回數(shù)組的首項值

返回數(shù)組的尾項值

返回數(shù)組的拷貝

移除數(shù)組中的重復(fù)項

將一段文字放到字符后面

重復(fù)字符片段n次

參考

How to Create Filters in Vue.js with Examples

VUE Guide

GPU云服務(wù)器云服務(wù)器 vue使用webrtc vue 中使用 webrtc vue怎么使用webRTC vue中使用webrtc

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94507.html

相關(guān)文章

Vue學(xué)習(xí)筆記（一）

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

baoxl 2019-08-30 13:47 評論0 收藏0
Vue學(xué)習(xí)筆記（一）

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

liukai90 2019-08-21 17:05 評論0 收藏0
Vue學(xué)習(xí)筆記（一）

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

rollback 2019-08-01 17:49 評論0 收藏0
Vue.nextTick，Vue.set，Vue.delete，Vue.filter學(xué)習(xí)

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

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

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

why_rookie 2019-08-20 16:56 評論0 收藏0
理清楚Vue的結(jié)構(gòu)

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

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