The filters filter has been removed from Vue 3.0 and is no longer supported.
grammar
In this, developers can use filters to handle common text formats.
<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>
While this seems convenient, it requires a custom syntax that breaks the principle of the expression "just JavaScript" in braces, which increases both the learning cost and the cost of implementing logic.
renew
In, the filter is deleted and is no longer supported. Instead, we recommend replacing them with method calls or computed properties.
The following example is a similar function.
<template>
<h1>Bank Account Balance</h1>
<p>{{ accountInUSD }}</p>
</template>
<script>
export default {
props: {
accountBalance: {
type: Number,
required: true
}
},
computed: {
accountInUSD() {
return '$' +
}
}
}
</script>
It is officially recommended to use computed properties or methods instead of using filters.
This is the end of this article about the problem of Vue3 not supporting Filters filters. For more related content of Vue3 Filters filters, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!