vue 绑定遍历出的新的值后改变旧的值的样式

可以使用 Vue 的计算属性和 class 绑定来实现。假设你有一个数组 `list`，你想遍历它并且当数组中的某个值改变时，改变该值所在元素的样式。你可以这样做：

首先，在 Vue 实例的 data 选项中定义一个新的数组 `styledList`，用于存储数组中每个元素的样式类名：

data: {
  list: [1, 2, 3, 4, 5],
  styledList: []
}

然后，在 Vue 实例中定义一个计算属性 `styledListComputed`，用于根据 `list` 数组中每个元素的值返回相应的样式类名：

computed: {
  styledListComputed() {
    return this.list.map((item) => {
      if (item % 2 === 0) {
        return 'even'
      } else {
        return 'odd'
      }
    })
  }
}

在上面的代码中，我们使用了 map() 方法来遍历 `list` 数组，并根据每个元素的值返回相应的样式类名。在这个例子中，我们将偶数元素的样式类名设置为 'even'，奇数元素的样式类名设置为 'odd'。

最后，在模板中使用 v-for 指令遍历 `list` 数组，并使用 v-bind:class 指令将计算属性 `styledListComputed` 返回的样式类名绑定到每个元素上：

<ul>
  <li v-for="(item, index) in list" :key="index" :class="styledListComputed[index]">{{ item }}</li>
</ul>

在上面的代码中，我们将计算属性 `styledListComputed` 返回的样式类名绑定到每个 li 元素的 class 属性上。如果某个元素的值发生变化，它的样式类名也会相应地改变，从而改变该元素的样式。