2025年03月06日 建站教程
功能介绍：利用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: "web建站"
},
{
type: "password",
title: "旧密码",
placeholder: "输入旧密码",
modelName: "lmcjl.com"
},
{
type: "password",
title: "新密码",
placeholder: "输入新密码",
modelName: "lmcjl.com"
}
],
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);
}
}
}
本文链接：http://so.lmcjl.com/news/24378/