javascript - 动态替换数组中的值

Question

我有一个这样的场景。说:设 a = [2,5,6] 并设 b = [1,2,3,4,5,6,7,8]。数组 b 显示在框中，并在单击任何框时显示。我想做的是，当单击任何框并且该值与数组 a 中的任何值相同时，我会用其他唯一值替换该值，如果它们不同，我会按原样显示。例如如果我单击值为 2、5 或 6 的框，我会将这些值替换为其他值。

一个最小的例子是:

new Vue({
  el: "#app",
  data: {
    a: [2,5,6],
    b: [1,2,3,4,5,6,7,8]
  },
  methods: {
    replaceNumber() {
      // function to replace the values
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
.numbers {
  display: flex;
}
li {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Numbers:</h2>
  <br/>
  <ul class="numbers">
    <li v-for="num in a">
      {{num}}
    </li>
  </ul>
  <br/>
  
  <template>
    <button @click="replaceNumber" v-for="number in b">
    {{ number }}
    </button>
  </template>
</div>

Answer 1

使用indexOf()定位要替换的元素的位置。

然后将 splice() 与您需要删除该元素的索引一起使用。

然后再次使用splice()将新值插入到同一索引。

检查上述每个方法的文档以了解其语法。