金山老师的笔记11.过滤器
过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。
过滤器分全局过滤器和本地过滤器（局部过滤器）。
11.1.全局过滤器
下面定义一个全局过滤器，用于在数据前加上大写的VUE。需要注意的是，全局过滤器定义必须始终位于Vue实例之上，否则会报错。
html
<div id="app">
{ { message | toAdd } }
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.filter("toAdd", function(value) {
return 'VUE' + value
})
var demo = new Vue({
el: '#app',
data: {
message: '过滤器',
}
})
</script>注意：
- Vue.filter() 后有两个参数：过滤器名，过滤器处理函数。
- 过滤器处理函数也有一个参数：要过滤的数据。
11.2.本地过滤器
本地过滤器存储在vue组件中，作为filters属性中的函数，我们可以注册多个过滤器存储在其中。
html
<div id="app">
<p> { { message | Reverse } } </p>
<p> { { message | Length } } </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var demo = new Vue({
el: '#app',
data: {
message: '过滤器',
},
filters: {
Reverse: function(value) {
if (!value){
return '';
}
return value.toString().split('').reverse().join('');
},
Length: function(value) {
return value.length;
},
},
})
</script>11.3.过滤器传参
过滤器也是可以传递参数的。
html
<div id="app">
{ { msg1 | toDou (1,2) } }
{ { msg2 | toDou (10,20) } }
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.filter('toDou', function(value, param1, param2) {
if (param2 < 10) {
return value + param1;
} else {
return value + param2;
}
});
new Vue({
el: '#app',
data: {
msg1: 9,
msg2: 12,
}
});
</script>注意：过滤器处理函数的第一个参数，仍然是要过滤的数据。从第二个参数开始，才是过滤器本身要传递的参数。
11.4.串联过滤器
多个过滤器可以串联使用
vue
<div id="app">
{ { money | prefix | suffix } }
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.filter("prefix", function(value) {
return '￥' + value
})
Vue.filter("suffix", function(value) {
return value + '元'
})
var demo = new Vue({
el: '#app',
data: {
money:10
}
})
</script>11.5 完整代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg" />
<p>{{msg|filtera}}</p>
<p>{{msg|reverse}}</p>
<p>输入内容的长度: {{msg|reverse|len}}</p>
<hr/>
<input type="text" v-model="num" />
<p>2倍 {{num|operation('1') }}</p>
<p>平方 {{num|operation('2')}}</p>
</div>
<script>
Vue.filter('filtera',function(value){
var arr = value.split('');
var newArr = [];
arr.forEach(function(item){
if(item != 'a'){
newArr.push(item)
}else{
newArr.push('*')
}
});
return newArr.join('');
})
let vm = new Vue({
el: '#app',
data: {
msg:'',
num:null
},
filters:{
reverse:function(value){
if (!value){
return '';
}
return value.toString().split('').reverse().join('');
},
len:function(value){
return value.length;
},
operation(num, type){
if(type == '1') {
return num * 2;
}else{
return num * num;
}
}
}
});
</script>
</body>
</html>