Vue自定义过滤器
定义语法
Vue.filter('过滤器名字',function (data) {
//处理数据的操作
})
-------------------------------------案列一 将以后替换成将来-------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
{{mes | glq}}
</div>
</body>
<script>
/*过滤器的定义语法 第一个参数规定死了 肯定是管道符传过来的数据*/
Vue.filter('glq',function (data) {
/*replace 可写一个字符串 还可以写正则表达式*/
//return data.replace('以后','将来');
return data.replace(/以后/g,'将来');
})
new Vue({
el: "#app",
data:{
mes:"以后的以后你是谁的某某某"
}
});
</script>
</html>
-------------------------------------案列一 传参数动态更改修改的文字可以传递多个参数 -------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
{{mes | glq('现在')}}
//多个参数在后面加即可glq('现在'，'十年后'，'百年后')
</div>
</body>
<script>
/*过滤器的定义语法 第一个参数规定死了 肯定是管道符传过来的数据*/
Vue.filter('glq',function (data,arg) {//多个参数在后面加即可(data,arg,arg1,.....)
/*replace 可写一个字符串 还可以写正则表达式*/
//return data.replace('以后','将来');
return data.replace(/以后/g,arg);
})
new Vue({
el: "#app",
data:{
mes:"以后的以后你是谁的某某某"
}
});
</script>
</html>
-------------------------------------过滤器可以同时调用多个 定义完成在{{}}添加即可 -------------------------------------------------------
-------------------------------------案列二 -------------------------------------------------------
item.ctime为new date();
pattern 为格式
-------------------------------------私有过滤器-------------------------------------------------------
定义在组件内部filters
参数可以给默认值 pattern = ' '
