1. 程式人生 > 程式設計 >Vue3不支援Filters過濾器的問題

Vue3不支援Filters過濾器的問題

filters過濾器已從Vue 3.0中刪除,不再支援。

2.x 語法

在2.x中,開發人員可以使用過濾器來處理常見的文字格式。

<template>
 <h1>Bank Account Balance</h1>
 <p>{{ accountBalance | currencyUSD }}</p>
</template>
<script>
 export default {
  props: {
   accountBalance: {
    type: Number,required: true
   }
  },filters: {
   currencyUSD(value) {
    return '$' + value
   }
  }
 }
</script>

雖然這看起來很方便,但它需要一個自定義語法,打破大括號內表示式“只是JavaScript”的原則,這既增加了學習成本,也增加實現邏輯的成本。

3.x 更新

在3.x中,過濾器被刪除,不再受支援。相反,我們建議用方法呼叫或計算屬性替換它們。

下面的例子是一個實現類似功能的。

<template>
 <h1>Bank Account Balance</h1>
 <p>{{ accountInUSD }}</p>
</template>

<script>
 export default {
  props: {
   accountBalance: {
    type: Number,computed: {
   accountInUSD() {
    return '$' + this.accountBalance
   }
  }
 }
</script>

官方建議用計算屬性或方法代替過濾器,而不是使用過濾器。

到此這篇關於Vue3不支援Filters過濾器的問題的文章就介紹到這了,更多相關Vue3 Filters過濾器內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!