相干材料:
- 过滤器(Vue官网应用阐明)
全局定义filter
在main.js
或者其余定义全局filter
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
那当然,也能够在以后组件中定义filter
,这是针对以后组件应用的。
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
在html应用filter
根本应用
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
过滤器能够串联:
<div>
{{ message | filterA | filterB }}
</div>
过滤器是 JavaScript 函数,因而能够接管参数:
<div>
{{ message | filterA('arg1', arg2) }}
</div>
在methods应用filter
methods: {
func: (){
const value = 'john';
// let f1 = Vue.filters['filterName'] (value);
let f2 = this.$options.filters['capitalize'](value); // 间接调用全局的filters
console.log(f2); // John
}
}