vue3 el-input 通过数组 获取显示

在 Vue 3 中，如果你想要通过数组动态地显示中文内容，并且使用 el-input 组件（来自 Element Plus 或 Element UI，取决于你使用的 Vue 版本和库），你可以通过以下几个步骤来实现：

1. 安装 Element Plus

首先，确保你已经安装了 Element Plus。如果还没有安装，可以通过 npm 或 yarn 来安装：

npm install element-plus --save
# 或者
yarn add element-plus

2. 在组件中引入 el-input

在你的 Vue 组件中，引入 el-input 组件：

import { ElInput } from 'element-plus';export default {components: {ElInput}
}

3. 使用 el-input 并绑定数组中的中文

在你的模板中，你可以使用 v-model 来绑定一个数组，并通过循环渲染每个元素到 el-input 中。例如：

<template><div><el-inputv-for="(item, index) in inputList":key="index"v-model="inputList[index]"placeholder="请输入内容"></el-input></div>
</template><script>
import { ElInput } from 'element-plus';export default {components: {ElInput},data() {return {inputList: ['示例1', '示例2', '示例3'] // 初始化为包含中文的数组};}
}
</script>

4. 更新数组以反映输入变化

如果你想要在用户输入时更新数组中的值，确保你的 v-model 正确绑定到数组的对应项上。上面的代码已经实现了这一点。每当用户在输入框中输入内容，inputList 数组中相应的项会自动更新。

5. 注意事项

• 确保你的 v-model 是绑定到数组的项上，而不是整个数组。这样每个输入框的更改都会直接反映到数组的相应项上。

• 如果你的数组项需要动态添加或删除，你可以使用 Vue 的响应式方法（如 push(), pop(), splice() 等）来修改 inputList。例如，添加一个新项：

methods: {addNewInput() {this.inputList.push(''); // 添加一个空字符串作为新输入框的初始值}
}

并在模板中添加一个按钮来触发这个方法：

<el-button @click="addNewInput">添加输入框</el-button>

通过以上步骤，你应该能够在 Vue 3 中使用 el-input 组件通过数组动态显示和编辑中文内容。