vue過(guò)濾器可以在不改變?cè)紨?shù)據(jù)，只是對(duì)數(shù)據(jù)進(jìn)行加工處理后返回過(guò)濾后的數(shù)據(jù)再進(jìn)行調(diào)用處理,下面這篇文章主要給大家介紹了關(guān)于Vue中過(guò)濾器必懂小知識(shí)的相關(guān)資料,需要的朋友可以參考下

前言

大家好，今天來(lái)分享下Vue中的過(guò)濾器小知識(shí)

什么是過(guò)濾器

Vue.js 允許你自定義過(guò)濾器，可被用于一些常見的文本格式化。過(guò)濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式 (后者從 2.1.0+ 開始支持)。

如何使用過(guò)濾器

全局過(guò)濾器

本案例是過(guò)濾價(jià)格中的￥和元
示例￥1999.00元
定義一個(gè)capitalize方法，傳入value值
如果value為空返回空字符串
否則就疊加字符串"￥" "元" ，這里的toFixed(2)四舍五入為指定小數(shù)位數(shù)

使用方法

//main.js
Vue.filter("capitalize", function (value) {
  if (!value) return "";
  return "￥" + value.toFixed(2) + "元";
});

在雙花括號(hào)中使用

<!-- home.vue -->
      <h1>Vue過(guò)濾器</h1>
      <p>{{ price | capitalize }}</p>
      {{ 20.6664376486 | capitalize }}

在 v-bind 中使用

      <h1>Vue過(guò)濾器</h1>
      <p :id="122 | capitalize"></p>

局部過(guò)濾器

這里注意下當(dāng)全局過(guò)濾器和局部過(guò)濾器重名時(shí)，會(huì)采用局部過(guò)濾器。

局部過(guò)濾器可以在一個(gè)組件的選項(xiàng)中定義本地的過(guò)濾器：

export default {
  name: 'index',
  data() {
    return {
      price: 1999
    }
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      return '￥' + value.toFixed(2) + '元'
    }
  }
}

過(guò)濾器可以串聯(lián)

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