在 Vue.js 中,过滤器(Filters)是一种用来格式化和处理模板中显示的数据的技术。过滤器可以用在两个地方:双花括号插值表达式(Mustache 插值)和 v-bind 表达式中。过滤器通过在双花括号插值表达式中使用管道符 | 的方式来应用。
<!-- 使用过滤器将 message 转为大写显示 -->
<p>{{ message | myFilter}}</p>
myFilter是一个过滤器的名字,用于将 message 的值转为大写后显示在页面上。Vue.js 会自动将 message 的值作为过滤器的第一个参数传入过滤器函数中。也可以传递参数给过滤器,多个参数之间使用 | 分隔。
<!-- 使用过滤器将 count 数字乘以 10后显示 -->
<p>{{ count | myFilter(10) }}</p>
// 在 Vue 实例中定义过滤器
new Vue({
// ...
filters: {
myFilter: function(value) {
return value.toUpperCase();
},
multiply: function(value, factor) {
return value * factor;
}
}
});