v-for批量生成el-input并动态绑定v-model(实时获取input输入值和索引) 发布时间:2025/01/17 功能介绍:利用v-for循环批量生成el-input组件,动态绑定v-model,并且实时获取input输入值和索引。 1、template <el-form> <el-form-item v-for="(item, index) in searchForm" :key="index" :label="item.title" > <el-input :type="item.type" v-model="item.modelName" @input.native="change($event, index)" :placeholder="item.placeholder" ></el-input> </el-form-item> </el-form>复制代码 2、data data() { return { searchForm: [ { type: "text", title: "用户名", placeholder: "输入用户名", modelName: "编程教程网" }, { type: "password", title: "旧密码", placeholder: "输入旧密码", modelName: "ipkd.cn" }, { type: "password", title: "新密码", placeholder: "输入新密码", modelName: "ipkd.cn" } ], userName: "", password1: "", password2: "" }; }, 复制代码 3、methods methods: { change: function(e, index) { if (index === 0) { this.userName = e.target.value; console.log("用户名:", this.userName); } else if (index === 1) { this.password1 = e.target.value; console.log("原密码", this.password1); } else if (index === 2) { this.password2 = e.target.value; console.log("新密码", this.password2); } } } 复制代码 以上是编程学习网小编为您介绍的“v-for批量生成el-input并动态绑定v-model(实时获取input输入值和索引)”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。