v-for内部绑定v-model

当使用 v-for 执行循环渲染时，如果直接在 v-for 内部绑定 v-model，会导致所有循环元素和 v-model 值之间产生相互关联。为了解决这个问题，可以使用一个对象数组代替简单的值类型数组，并将 v-model 绑定到数组元素的属性上。

例如，以下代码示例将一个对象数组渲染到模板中，并在每个元素上绑定一个名为“checked”的属性，表示该元素是否被选中：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <input type="checkbox" v-model="item.checked">{{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '选项1', checked: false },
        { name: '选项2', checked: true },
        { name: '选项3', checked: false },
      ],
    };
  },
};
</script>

在此示例中，每个元素都包含一个名为“checked”的属性，该属性与 v-model 绑定。这样可以确保每个元素的选中状态不会互相影响。