Vue练习九:02_03_求数组中所有数字的和
Demo 在线地址:
https://sx00xs.github.io/test/9/index.html
---------------------------------------------------------------
ide: vscode
文件格式:.vue
解析:(待补)
<template>
<div id="app">
<div class="outer">
<label><input type="text" v-model="arr" @keyup="handleKeyup"><span>输入数字求和,数字之间用半角","号分隔</span></label>
<p><button @click="handleSum">求和</button></p>
<p>输入的数组是:{{arr}}</p>
<strong class="sum">{{sum}}</strong>
</div>
</div>
</template>
<script>
export default {
data:function(){
return{
arr:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
sum:''
}
},
methods:{
handleKeyup(){
this.arr=this.arr.toString().replace(/[^(\d)|(,)]/,"").split(',');
},
handleSum(){
this.sum='';
//.arr=this.arr.toString().split(',');
console.log(this.arr instanceof Array);
this.sum=this.arr.reduce(function(prev, cur, index, array){
return parseInt(prev) + parseInt(cur);
})
}
}
}
</script>

浙公网安备 33010602011771号