Vue项目中定义过滤器(全局和单组件)
官网描述https://cn.vuejs.org/v2/guide/filters.htmlVue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部定义全局过滤器文件布局位置// 实现一个给所有数字小数部分都变成两位...
·
官网描述 https://cn.vuejs.org/v2/guide/filters.html
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind
表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部
定义全局过滤器
文件布局位置
// 实现一个给所有数字小数部分都变成两位,没有后补零
export const yuan = value =>
value
? (value / 100).toFixed(2)
: value;
export default {
install(Vue) {
Vue.filter('yuan', yuan);
}
};
在main.js里这样子引入
import filters from '@/filter';
Vue.use(filters);
可以在任意组件内使用只能是在v-bind或者双花括号插值里用
<!-- 在双花括号中 -->
{{ message | yuan}}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | yuan"></div>
定义单组件过滤器
// 组件内直接用
filters: {
yuan(value) {
return value ? (value / 100).toFixed(2) : value
}
}
使用方案和全局一致
更多推荐
已为社区贡献25条内容
所有评论(0)