SOURCE

Vue.use(RecyclerView)
Vue.component("photo-item",{
  
  
})
new Vue({
  el: "#app",
  data:{
    data: [
      { price: '', number: '' }
    ]
  },
  computed:{
    count(){
      let count = 0; 
      this.data.map(item=>{
        count += Number(item.number);
      })
      return count
      
    },
    total(){
      let total = 0; 
      this.data.map(item=>{
        total += Number(item.price);
      })
      return total || 0
    },
    average(){
      let total = 0; 
      this.data.map(item=>{
        total += ( Number(item.price) *  Number(item.number));
      })
      return total / this.count
    }
  },
  methods:{
    add(){
      this.data.push(
       { price: '', number: '' }
      )
    }
  },
  created: function(){

  }
})

<div id="app">
  <p> 投入成本：{{ total }} ; 数量: {{count}} </p>
  <p> 均价: {{ average }} </p>
  <ul>
    <li class="item" v-for="(i, index) in data">
      {{index + 1}}
      <div class="price"> 
        价格：<input type="text" v-model="i.price"/>
        数量：<input type="text" v-model="i.number" />
      </div>
    </li>
  </ul> 
  <button @click="add"> 添加 </button>
</div>

ul{
  margin: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 10px;
}
.item{
  
  padding: 10px;
  border:1px #ccc solid;
}