<p style="margin-bottom: 20px;" v-for="(item, index) in arr" :key="index"> <el-input v-model="item.name" style="width: 270px;" placeholder="请输入内容"></el-input> <el-input v-model="ruleForm.name" style="width: 270px;" placeholder="请输入内容"></el-input> </p> 在input 框如何输入值 不影响别的输入框 然后点确定 都能将对对应的保存下来

你可以在每个输入框中使用独立的 `v-model` 进行双向绑定，这样它们就不会互相影响。然后，在点击确定按钮时，将所有输入框中的值保存到数组中即可。以下是一个示例代码：

<template>
  <div>
    <p v-for="(item, index) in arr" :key="index">
      <el-input v-model="item.name" style="width: 270px;" placeholder="请输入内容"></el-input>
      <el-button type="primary" @click="saveItem(index)">确定</el-button>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        { name: '' },
        { name: '' },
        { name: '' }
      ],
      ruleForm: {
        name: ''
      }
    }
  },
  methods: {
    saveItem(index) {
      // 保存当前输入框的值到对应的数组项中
      this.arr[index].name = this.ruleForm.name;
    }
  }
}
</script>

在上面的代码中，我们使用了一个数组 `arr` 来存储每个输入框的值，同时使用 `v-for` 指令来渲染多个输入框。每个输入框都有独立的 `v-model` 进行双向绑定，而点击确定按钮时则调用 `saveItem` 方法将当前输入框的值保存到对应的数组项中。