本文通过一个示例展示了Vue.js中Computed属性与Filter的功能区别。通过计算偶数数组的例子，介绍了两种方法的实现方式及其优缺点。Computed属性能够缓存结果并在依赖的数据变化时重新计算，而Filter则用于简单的数据转换。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>computed属性计算</title>
<script src="../vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="myApp">
<!--过滤器写法-->
{{arr|odd}}
<!--属性计算写法-->
{{Odd}}
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#myApp",
data:{
arr:[1,2,3,4,5,6,7,8]
},
filters:{
odd:function(arr){
var Arr=[];
for(var i=0;i<arr.length;i++){
if(arr[i]%2==0){
Arr.push(arr[i]);
}
}
return Arr;
}
},
computed:{
Odd:function(){
//复杂写法
// var Arr=[];
// for(var i=0;i<this.arr.length;i++){
// if(this.arr[i]%2==0){
// Arr.push(this.arr[i]);
// }
// }
// return Arr;
//简单写法 filter
return this.arr.filter(function(n){
return n%2==0;
});
}
}
})
</script>
</html>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
