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>