vue3 双向绑定 array

在 Vue3 中，可以使用 `v-model` 指令与 `ref` 来实现对数组的双向绑定。

我们可以通过创建一个 `ref` 对象，并将其绑定到 Vue 组件的数据上，在组件中使用 `v-for` 循环渲染数组，并将每个数组项的值与 `ref` 对象进行绑定，从而实现双向绑定。

下面是一个简单的示例代码：

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <input type="text" v-model="list[index]" />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const list = ref(['item1', 'item2', 'item3']);

    return {
      list,
    };
  },
};
</script>

在上面的示例中，我们创建了一个名为 `list` 的 `ref` 对象，并将其绑定到了 Vue 组件的数据上。然后，在模板中，我们使用 `v-for` 循环渲染数组，并将每个数组项的值与 `list` 对象进行了双向绑定。

通过这样的方式，当输入框中的值发生变化时，数组中对应的值也会随之改变，从而实现了对数组的双向绑定。