Vue过滤器是一种可以在模板中对数据进行处理的方法,它可以帮助我们将原始数据转换为我们想要的格式。它可以用于格式化日期、金钱、字符串等,也可以用于处理复杂的逻辑。
Vue过滤器的使用非常简单,只需要在模板中使用“|”符号将过滤器名称和要处理的数据分隔开即可。例如:
{{ message | capitalize }}
上面代码中,capitalize是一个过滤器,它会将message字符串中的所有字母转化为大写。
Vue也允许我们在使用过滤器时传入参数。例如:
{{ message | truncate(10) }}
上面代码中,truncate是一个过滤器,它会将message字符串截断到10个字符。
此外,Vue也允许我们在其它过滤器之后再使用一个过滤器。例如:
{{ message | truncate(10) | capitalize }}
上面代码中,truncate会将message字符串截断到10个字符,然后capitalize会将剩余的字符转化为大写。
最后要说明的是,Vue也允许我们自定义过滤器。例如:
从 Vue 3.0 开始,过滤器已删除,不再支持。
在 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 中,过滤器已删除,不再支持。相反地,我们建议用方法调用或计算属性替换它们。
使用上面的例子,这里是一个如何实现它的例子。
<template>
<h1>Bank Account Balance</h1>
<p>{{ accountInUSD }}</p>
</template>
<script>
export default {
props: {
accountBalance: {
type: Number,
required: true
}
},
computed: {
accountInUSD() {
return "$" + this.accountBalance
}
}
}
</script>
我们建议用计算属性或方法代替过滤器,而不是使用过滤器。
如果在应用中全局注册了过滤器,那么在每个组件中用计算属性或方法调用来替换它可能就没那么方便了。
相反地,你可以通过全局属性在所有组件中使用它:
// main.js
const app = createApp(App)
app.config.globalProperties.$filters = {
currencyUSD(value) {
return "$" + value
}
}
然后,你可以通过 $filters
对象修改所有的模板,像下面这样:
<template>
<h1>Bank Account Balance</h1>
<p>{{ $filters.currencyUSD(accountBalance) }}</p>
</template>
注意,这种方式只能用于方法中,不可以在计算属性中使用,因为后者只有在单个组件的上下文中定义时才有意义。
Vue 2.x 有许多全局 API 和配置,这些 API 和配置可以全局改变 Vue 的行为。例如,要创建全局组件,可以使用 Vue.component 这样...
#概览对内联特性的支持已被移除。#2.x 语法在 2.x 中,Vue 为子组件提供了 inline-template attribute,以便将其内部内容用作模...
#概览以下是变更的简要总结:非兼容:不再支持使用数字 (即键码) 作为 v-on 修饰符非兼容:不再支持 config.keyCodes#2.x 语法在...
提示在阅读文档之前,你应该已经熟悉了这两个 Vue 基础和创建组件。在 Vue Mastery 上观看关于组合式 API 的免费视频。通过创建 ...