vue过滤器可以格式化常用文本，vue过滤器只能在插值表达式{{}}和v-bind中使用
顾名思义，过滤就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。例如，从['abc','abd','ade']数组中取得包含‘ab’的值，那么可通过过滤器筛选出来‘abc’和‘abd’；把‘Hello’变成‘Hello World’，那么可用过滤器给值‘Hello’后面添加上‘ World’；
一、定义一个全局过滤语法：
vue.filter("过滤器名称"，函数)
定义一个Vue全局过滤器很简单，使用Vue的filter方法，第一个参数是过滤器的名称，第二个参数是处理函数，那如何使用过滤器呢 来个例子
<div id="app">
<p>{{ msg | myFilter }}</p>
<!--
{{ msg | myFilter }}第一个参数msg为data中的数据，第二个参数myFilter是过滤器名称
两者之间用’’|’'隔开,当程序运行时，msg的值会传递到过滤器，经过过滤器后，最终的结果是过滤器返回的值。
-->
</div>
<script>
//过滤器
Vue.filter("myFilter",function(msg){//myFilte为r过滤器名称，msg就是需要过滤的数据
//注意 使用正则表达式的话不要加引号
//乳猪/g 会匹配字符串中所有的肥羊，replace会将匹配到的字符全部替换成肥羊
return msg.replace(/小乳猪/g,"小肥羊")
})
let vm = new Vue({
el:"app",
data:{
msg: '看，远方有头小乳猪，晚上可以烤乳猪吃了 哈哈哈哈！'
}
})
</script>
上面的代码中，首先在data中定义了一个字符串msg，现在，然后定义了一个全局过滤器myFilter,在过滤器中会将所接受到的参数中的乳猪二字替换成肥羊二字，并返回
运行截图：
微信图片_20190516164147.png
；
再来看看过滤器中的第二个参数-----回调函数
function (msg) {
//注意 使用正则表达式的话不要加引号
///乳猪/g 会匹配字符串中所有的肥羊，replace会将匹配到的字符全部替换成肥羊
return msg.replace(/乳猪/g, "肥羊");
})
可以发现里面有一个参数，{{msg |myFilter}}中的msg的值（即data）会保存在回调函数中的第一个形参中，
接下来修改一下上面的代码：
<div id="head">
//这里的字符串小黑牛将传给过滤器的第2个参数，也就是arg , 因为第1个是数据本身。
<p>{{ msg | myFilter("小黑牛") }}</p>
</div>
<script>
//Vue过滤器
Vue.filter('myFilter', function (msg, arg) {
//注意 使用正则表达式的话不要加引号
return msg.replace(/乳猪/g, arg);
})
let vue1 = new Vue({
el: '#head',
data: {
msg: '看，远方有头小乳猪，晚上可以烤乳猪吃了 哈哈哈哈！'
}
});
</script>
微信图片_20190516170602.png
可以发现我们传递了一个黑牛，而运行后msg中的乳猪也全变成了黑牛，这是因为使用过滤器时可以传递参数进去，可以传递多个参数，但是回调函数的第一个参数一定是要过滤的数据。
那可以同时使用多个过滤器吗？答案是肯定了，接着修改上面的代码：
<div id="head">
<p>{{ msg | myFilter("黑牛") | myFilter2 }}</p>
</div>
<script>
//Vue过滤器
Vue.filter('myFilter', function (msg, arg) {
//注意 使用正则表达式的话不要加引号
return msg.replace(/乳猪/g, arg);
});
Vue.filter('myFilter2', function (msg) {
//注意 使用正则表达式的话不要加引号
return msg + "-----我是过滤器2";
})
let vue1 = new Vue({
el: '#head',
data: {
msg: '看，远方有头小乳猪，晚上可以烤乳猪吃了 哈哈哈哈！'
}
});
</script>
新定义一个过滤器myFilter2，他的作用在原字符串的尾部加上‘-----我是过滤器2’这句话，接下来在插值表达式中在过滤器myFilter后面继续添加过滤器，
运行截图:
d568c3e3d957ab677d1d647c73670e3.png
所以msg被过滤器1过滤后返回的值会被后一个过滤器所过滤，知道最后一个过滤器才会返回最终的结果。
局部过滤器的定义
在一个页面中可以定义多个Vue的实例，每个Vue的实例都可以使用全局过滤器，既然全局过滤器是所有的Vue实例都能使用，那么私有过滤器就是只能是定义过滤器的实例使用，
定义一个私有过滤器要在创建Vue实例的实例定义，通过filters来定义（别忘了s,全局的没有s）,定义filters和定义methods差不多
<div id="head">
<p>{{ date | myFilter1 }}</p>
</div>
<script>
let vue1 = new Vue({
el: '#head',
data: {
date: '今天做梦梦见今天要做梦!'
},
filters: {
myFilter1: function (data) {
return data.replace(/今天/g, '明天');
}
}
});
</script>
所有的私有过滤器都要定义在filters中，myFilter1是过滤器的名字，function (data)函数体是要过滤要执行的方法，功能和上面的一样，将所接受到的数据中的‘今天’修改成‘明天’并返回
如图：
72a7fc04585d4a75300f54cb4f51d5c.png
可以看到，今天全部变成了明天
私有过滤器的使用方法和全局过滤器差不多，至于用谁就得实际情况来选择了
如果全局过滤器和私有过滤器重名了，那会使用谁呢？
答案是会使用私有过滤器，就近原则
例子###
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <link rel="stylesheet" type="text/css" href="css/index.css" /> -->
</head>
<body>
<div id="app">
<!-- v-pre不编译{{}}，直接打印{{}} -->
{{date | formate}}
<span v-pre>{{11}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var paDate = function(value) {
return value < 10 ? '0' + value : value;
}
var app = new Vue({
el: "#app",
data: {
date: new Date(),
timer: ""
},
//定义过滤器
filters: {
formate: function(date) { //date就是需要过滤的数据，会保存在回调函数中的第一个形参中，
var year = date.getFullYear();
var month = paDate(date.getMonth() + 1);
var day = paDate(date.getDate());
var hour = paDate(date.getHours());
var minutes = paDate(date.getMinutes());
var seconds = paDate(date.getSeconds());
return year + '-' + month + '-' + day + '-' + hour + '-' + minutes + '-' + seconds;
}
},
mounted: function() {
//保证this的指向作用域保持一致
var _this = this;
this.timer = setInterval(() => {
_this.date = new Date();
}, 1000)
},
//在vue实例消失之前,清除我们的计时器
beforeDestroy: function() {
if (this.timer) {
clearInterval(this.timer)
}
}
})
//过滤器也可以串联，而且可以接收参数，例如：
/*
串联
{{ message | filterA | filterb}}
接收参数
{{ message | filterA( "argl","arg2")}}
这里的字符串缸argl arg2 将分别传给过滤器的第1个和第2个参数，因为第1个是数据本身。
过滤器应当用于处理简单的文本转换
*/
</script>
</body>
</html>
网友评论