代码：
<html>
<head>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 计算属性 -->
<div id="app1" style="width: 300px">
<div>
<font>元数据：</font> <input style="float: right" type="text" name="" :value="numbers" >
</div>
<div>
<font >filter:</font> <input style="float: right" type="text" name="" :value="filter" >
</div>
<div>
<font >map:</font> <input style="float: right" type="text" name="" :value="map" >
</div>
<div>
<font >reduce:</font> <input style="float: right" type="text" name="" :value="reduce" >
</div>
<div>
<font >mixed:</font> <input style="float: right" type="text" name="" :value="mixed" >
</div>
<div>
<font >mixed1:</font> <input style="float: right" type="text" name="" :value="mixed" >
</div>
</div>
<script type="text/javascript">
var app1=new Vue({
el:"#app1",
data:{
numbers:[1,2,3,4,6,7,8,9,10]
},
computed:{
filter (){
//将符合条件的元素会先缓存起来然后返回
return this.numbers.filter(function f1(n) {
//1.获取所有小于5的元素
// return n < 5 ? true:false
//2.获取所有偶数
return n % 2 == 0 ? true:false
})
},
map(){
//操作数组中的所有元素
return this.numbers.map(function(n){
return n*2 +""
})
},
reduce(){
//对数组中的元素进行汇总
return this.numbers.reduce(function(pre,curent){
return pre+curent
})
},
mixed(){
//过滤乘以2求和
return this.numbers.filter(function(n){
return n < 5 ? true:false
}).map(function(m,n){
return m * 2
}).reduce(function(i,j){
return i+j
})
},
mixed1(){
//简写： 过滤乘以2求和
return this.numbers.filter(n=>n<5).map(n=>n*2).reduce((i,j) => i+j)
},
}
})
</script>
</body>
</html>
9184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
