Vue过滤器
一.Vue过滤器概念
过滤器是对即将显示的数据做进一步的筛选处理,然后进行显示,值得注意的是过滤器并没有改变原来的数据,只是在原数据的基础上产生新的数据。
二.过滤器使用
1.过滤器的定义
过滤器的定义有两种方式:全局定义和局部定义
- 全局定义
/*
Vue.filter(filterName,callback);
filterName 过滤器的名字
callback 过滤器的逻辑操作,必须要有返回值
value 要过滤显示的数据
*/
Vue.filter('rmb', function (value) {
return "$" + value;
});
- 局部定义
/*
//定义局部组件
filters: {
//局部组件名称
getno: function (value) {
return 'R' + value;
}
}
*/
const vm = new Vue({
el: '#app',
data: {
price: 100,
orderno: '15343435353'
},
filters: {
getno: function (value) {
return 'R' + value;
}
}
});
2.过滤器的使用
使用方式只有两种 双花括号插值 和v-bind表达式
过滤器应该被添加在 表达式的尾部,由“|”符号指示
在双花括号中:
<div id="app">
/*
* price 需要处理的数据
* rmb 过滤器的名称
*/
{{price | rmb}}
{{orderno | getno}}
</div>
在一些电商网站中,还有经常会处理一些单号的过程中,我们都需要使用到过滤器 比如 金额前面加美元或人民币的单位之类,或者单号前面加前缀之类.其实还有很多应用
在v-bind中
<!-- 在 `v-bind` 中 -->
<span v-bind:price="price | rmb"></span>
<span v-bind:orderno="orderno | getno"></span>