關於Vue中過濾器的必懂小知識

Posted on by

前言

大傢好，今天來分享下Vue中的過濾器小知識

什麼是過濾器

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

如何使用過濾器

全局過濾器

  1. 本案例是過濾價格中的￥和元
  2. 示例 ￥1999.00元
  3. 定義一個capitalize方法，傳入value值
  4. 如果value為空返回空字符串
  5. 否則就疊加字符串”￥” “元” ，這裡的toFixed(2)四舍五入為指定小數位數

使用方法

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

在雙花括號中使用

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

在 v-bind 中使用

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

局部過濾器

這裡註意下 當全局過濾器和局部過濾器重名時，會采用局部過濾器。

局部過濾器可以在一個組件的選項中定義本地的過濾器：

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

過濾器可以串聯

在這個例子中，filterA 被定義為接收單個參數的過濾器函數，表達式 message 的值將作為參數傳入到函數中。然後繼續調用同樣被定義為接收單個參數的過濾器函數 filterB，將 filterA 的結果傳遞到 filterB 中。

{{ message | filterA | filterB }}

註意：

1、 當有局部和全局兩個名稱相同的過濾器時候，會以就近原則進行調用，即：局部過濾器優先於全局過濾器被調用！

2、 一個表達式可以使用多個過濾器。過濾器之間需要用管道符“|”隔開。其執行順序從左往右

總結

到此這篇關於Vue中過濾器必懂小知識的文章就介紹到這瞭,更多相關Vue過濾器小知識內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：