Vue之在methods中使用filter的方法
相关资料:
全局定义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
}
}