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>
原文地址:https://www.cnblogs.com/sx00xs/p/11265957.html