Vue的过滤器
在ES5中,数组的filter()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
var arr = [1,2,3,4,5];
var returnArr = arr.filter(function(ele,index,arr){
if(ele%2===0){
return true;
}
else{
return false;
}
})
console.log(returnArr);
</script>过滤器注册 大致的过程可以分成两步 1.进行过滤器的注册 2.过滤器的使用,在表达式的后面添加管道符号(|)
私有过滤器 注册的时候使用filters属性,只能在当前vue组件(实例)下使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message | toUC}}
<br /> {{ message | toUC(message)}}
</div>
</body>
</html>
<script>
var viewModel = {
message: 'hello world!',
message1: 'HELLO WORLD!'
}
//1. 私有过滤器
var vm1 = new Vue({
el: '#app',
data: viewModel,
filters: {
toUC: function(input) {
return input.toUpperCase()
}
}
})
</script>全局过滤器
<!DOCTYPE html>
<html>
<head>
<title>全局过滤器</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
<!-- 写法1 -->
<!-- {{msg1 | toLC(msg1)}} -->
<!-- 写法2 -->
{{msg1 | toLc}}
</div>
<div id="app2">
{{msg2 | toLc}}
</div>
</body>
<script type="text/javascript">
Vue.filter('toLc', (input) => {
return input.toLowerCase();
});
var vm1 = new Vue({
el: "#app1",
data: {
msg1: "I AM GOOD MAN"
}
});
var vm2 = new Vue({
el: '#app2',
data: {
msg2: "YOU ARE A GOOD Girl"
}
})
</script>
</html>双向过滤器 双向过滤器就是: 通过过滤器实现双向的数据过滤
<!DOCTYPE html>
<html>
<head>
<title>私有过滤器</title>
<!--在这里引入1.0的js文件-->
</head>
<body>
<div id="app">
<input type="text" v-model="price | cents" />
</div>
</body>
<script type="text/javascript">
Vue.filter('cents', {
read:function(value){
return (value/100).toFixed(2);
},
write:function(value){
return value*100;
}
});
var vm = new Vue({
el: '#app',
data: {
price:150
}
})
</script>
</html>1.0和2.0的注意事项
1.取消了内置过滤器
2.取消了对v-model和v-on的支持,也就是只能在{{ }}中使用
3.在动态参数方面,不再使用空格的形式,而是适应函数的形式本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.05.13 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读