如何平均两个具有相同元素的数组?

时间:2019-08-18 19:19:13

标签: vue.js vuejs2

我有两个数组。我想例如平均每个的第一个索引。使用Vue进行此操作的最佳方法是什么?我打算平均所有索引,但现在想了解如何仅对一个元素进行计算。

new Vue({
  el: "#app",
  data: {
    array1: [
      { pizza: "20" },
      { popcorn: "7"},
      { pretzel: "15"},
      { fries: "11"}
    ],
    array2: [
      { pizza: "9" },
      { popcorn: "17"},
      { pretzel: "5"},
      { fries: "4"}
    ]
  },
  methods: {
  
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  average pizza = {{array1[0] + array2[0] / 2}}
</div>

1 个答案:

答案 0 :(得分:0)

您可以创建一个接受索引并返回平均值的方法。要获得价值,只需使用Object.keys[0],使用一元Number运算符即可转换为+

methods: {
  getAvarageByIndex(index) {
    return (+Object.values(this.array1[index])[0] + +Object.values(this.array2[index])[0]) / 2;
  }
}

new Vue({
  el: "#app",
  data: {
    array1: [{
        pizza: "20"
      },
      {
        popcorn: "7"
      },
      {
        pretzel: "15"
      },
      {
        fries: "11"
      }
    ],
    array2: [{
        pizza: "9"
      },
      {
        popcorn: "17"
      },
      {
        pretzel: "5"
      },
      {
        fries: "4"
      }
    ]
  },
  methods: {
    getAvarageByIndex(index) {
      return (+Object.values(this.array1[index])[0] + +Object.values(this.array2[index])[0]) / 2;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <span>{{ getAvarageByIndex(2) }}</span>
  </div>
</div>