Vue 中过滤器的使用和定义
Vue 中过滤器的使用和定义 过滤器的定义1、全局过滤器的定义mian.js 中进行定义Vue.filter("moneyFilter", function(value, num, type) {//value是使用过滤器是的表达式或者值,num和tyep中的参数return "¥" + value.toFixed(num) + type;});过滤...
·
Vue 中过滤器的使用和定义
过滤器的定义
1、全局过滤器的定义
mian.js 中进行定义
Vue.filter("moneyFilter", function(value, num, type) {
//value是使用过滤器是的表达式或者值,num和tyep中的参数
return "¥" + value.toFixed(num) + type;
});
过滤器的参数解析
moneyFilter表示的是过滤器的名称
函数中的参数解析:
value是通过管道传来的数据
num在调用过滤器时在圆括号中第一个参数
type在调用过滤器时在圆括号中第二个参数
2、文件组件 中(局部 )过滤器的定义
Vue 文件组件中定义
//文件组件内的自定义过滤器
filters: {
moneyFilter: function(value, num, type) {
return "¥" + value.toFixed(num) + type;
},
capitalize: function (value) {
return 'id'+value+'test';
}
}
过滤器的参数解析
moneyFilter过滤器名称;
myInput是通过管道传来的数据;
num在调用过滤器时在圆括号中第一个参数;
type在调用过滤器时在圆括号中第二个参数;
3、通过文件定义的全局过滤器
customFilter.js
//日期格式过滤器
let dateServer = value => {
return value.replace(/(\d{4})(\d{2})(\d{2})/g, "$1-$2-$3");
};
//金额格式过滤器
let moneyFilter = (value, num, type) => {
return "¥" + value.toFixed(num) + type;
};
//时间格式过滤器
let dateFilter = (input, format = "yyyy-MM-dd hh:mm:ss") => {
var o = {
"M+": input.getMonth() + 1, //月份
"d+": input.getDate(), //日
"h+": input.getHours(), //小时
"m+": input.getMinutes(), //分
"s+": input.getSeconds(), //秒
"q+": Math.floor((input.getMonth() + 3) / 3), //季度
S: input.getMilliseconds() //毫秒
};
if (/(y+)/.test(format))
format = format.replace(
RegExp.$1,
(input.getFullYear() + "").substr(4 - RegExp.$1.length)
);
// 不够2位的前面补0
for (var k in o)
if (new RegExp("(" + k + ")").test(format))
format = format.replace(
RegExp.$1,
RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
);
return format;
};
export { dateServer, moneyFilter, dateFilter };
main.js 中注册 全局自定义指令
//引入文件
import * as custom from "./common/filters/customFilter";
//注册自定义过滤器
Object.keys(custom).forEach(key => {
Vue.filter(key, custom[key]);
});
4、过滤器的使用
在双花括号中使用
<div>{{money|moneyFilter(2,'元')}}</div>
money是通过挂到传递的值或者是表达式
moneyFilter是过滤器名称
2是参数1
'元'是参数2
在 v-bind
中使用
不带参数的
<div v-bind:id="id | capitalize"></div>
带参数的
<div :id="id |capitalize(12)">我是过滤器</div>
id是过滤器中传递的值;
capitalize是过滤器名称;
capitalize括号中的是过滤器传递的参数;
总结:
vue1.版本是有内置的过滤器,但是在 vue2.所有的版本都已经没有自带的过滤器了。Vue.js 允许自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:
更多推荐
已为社区贡献2条内容
所有评论(0)