vue過(guò)濾器的使用

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

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

vue過(guò)濾器

過(guò)濾器實(shí)質(zhì)不改變?cè)紨?shù)據(jù)，只是對(duì)數(shù)據(jù)進(jìn)行加工處理后返回過(guò)濾后的數(shù)據(jù)再進(jìn)行調(diào)用處理，這點(diǎn)要切記

過(guò)濾器的定義和使用 定義

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

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

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

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

使用

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

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

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

{{ money | toFixed | toRMB }}

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

過(guò)濾器函數(shù)是指接收的參數(shù)不止value這一個(gè)，還可以添加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請(qǐng)戳

其他一些例子

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

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

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

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

返回給定隊(duì)列的最小值

打亂元素

返回?cái)?shù)組的首項(xiàng)值

返回?cái)?shù)組的尾項(xiàng)值

返回?cái)?shù)組的拷貝

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

將一段文字放到字符后面

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

參考

How to Create Filters in Vue.js with Examples

VUE Guide

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/94507.html

相關(guān)文章

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

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

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

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

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

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

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

摘要：用法在下次更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。只要觀察到數(shù)據(jù)變化，將開(kāi)啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有的數(shù)據(jù)改變。如果對(duì)象是響應(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 評(píng)論0 收藏0
Vue2.0中Filter的使用問(wèn)題

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

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

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

terro 2019-08-23 15:19 評(píng)論0 收藏0