v-for批量生成el-input并动态绑定v-model（实时获取input输入值和索引）

功能介绍：利用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 内容，请继续关注编程基础学习网。