在vue中,过滤器注意用来文本的格式化,或者数组数据的过滤和排序等。
全局过滤器:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../JS/vue.js"></script>
<title>过滤器</title>
</head>
<body>
<!--
过滤器本质上是一个函数,与自定义指令相似,过滤器分为全局过滤器和局部过滤器。
全局过滤器通过使用Vue.filter()方法注册,该方法接受两个参数,第一个参数是过滤器的ID(即名字),
第二个参数是一个函数对象,过滤器要实现的功能在这个函数中定义。(Vue.filter(id,[definition]))
-->
<div id="app">
{{message | capitalize}}
</div>
<script>
//全局过滤器:将字符串首字母转换为大写
//1.当全局过滤器和局部过滤器重名时,会采用局部过滤器
//2.全局过滤器可以在任何Vue实例的模板中使用
//3.过滤器可以用在两个地方:爽花括号插值和v-bind表达式,
//使用时通过管道符(|)添加到表达式的尾部使用
//<a v-bind:href="url | lowercase"></a>
//除此之外其他指令中都用不了
Vue.filter('capitalize',function (value) {
if (!value) return'';
value = value.toString();
return value.charAt(0).toUpperCase()+value.slice(1);
})
var vm = new Vue({
el: '#app',
data: {
message: 'helloWord'
}
});
</script>
</body>
</html>
局部过滤器:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../JS/vue.js"></script>
<title>过滤器</title>
</head>
<body>
<!--
过滤器本质上是一个函数,与自定义指令相似,过滤器分为全局过滤器和局部过滤器。
全局过滤器通过使用Vue.filter()方法注册,该方法接受两个参数,第一个参数是过滤器的ID(即名字),
第二个参数是一个函数对象,过滤器要实现的功能在这个函数中定义。(Vue.filter(id,[definition]))
-->
<div id="app">
{{message | capitalize}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'helloWord'
},
//局部过滤器,
// 1.当全局过滤器和局部过滤器重名时,会采用局部过滤器
// 2.局部过滤器只能在该实例绑定的视图中使用
// 3.过滤器可以用在两个地方:双花括号插值和v-bind表达式,
// 使用时通过管道符(|)添加到表达式的尾部使用
//<a v-bind:href="url | lowercase"></a>
//除此之外其他指令中都用不了
filters:{
capitalize:function (value) {
if (!value) return'';
value = value.toString();
return value.charAt(0).toUpperCase()+value.slice(1);
}
}
});
</script>
</body>
</html>
过滤器接收多个参数:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../JS/vue.js"></script>
<title>过滤器</title>
</head>
<body>
<!--
过滤器总是接收表达式的值作为第一个参数,如{{message|capitalize}},
message的值作为capitalize过滤器函数的第一个参数。过滤器本质上是一个javaScript函数,自然也可以接收多个参数
多个参数写法还可以写为Vue.filter('format',function (value,...params)(这里使用了es6中的rest参数)
-->
<div id="app">
{{message | format('vue',suffix)}}
</div>
<script>
Vue.filter('format',function (value,prefix,suffix) {
if (!value) return'';
value = value.toString();
return prefix + "-" +value + "-" + suffix
})
var vm = new Vue({
el: '#app',
data: {
message: 'helloWord',
suffix: '你好世界'
}
});
</script>
</body>
</html>
多个过滤器的串联使用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../JS/vue.js"></script>
<title>过滤器(串联过滤器)</title>
</head>
<body>
<!--
过滤器总是接收管道符(|)前的表达式作为第一个参数,利用该特性,可以将多个过滤器通过管道符串联起来使用,类似于方法链
的调用形式。
例如,有两个过滤器:将字符串转换为大写的过滤器和将字符串反转的过滤器,如果同时需要这两个功能,
就可以将这两个过滤器通过管道符串联在一起使用。
-->
<div id="app">
{{message | uppercase |reverse}}
</div>
<script>
//全局过滤器:将字符串转换为大写
Vue.filter('uppercase',function (value) {
if (!value) return'';
value = value.toString();
return value.toUpperCase();
})
//全局过滤器:将字符串反转
Vue.filter('reverse',function (value) {
if (!value) return'';
value = value.toString();
return value.split('').reverse().join('');
})
var vm = new Vue({
el: '#app',
data: {
message: 'hello word'
}
});
</script>
</body>
</html>