相干材料:
- 过滤器(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
}
}