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: "web建站"
      },
      {
        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);
    }
  }
}

JavaScript动态绑定方法不执行正确代码示例

Vue动态绑定类时出现“空类”怎么办

vuejs实现el-input复制粘贴功能

v-for循环生成el-input带rules验证

el-input输入框关键字筛选列表数据

标签： el-input, v-for循环, 动态绑定

上面是“v-for批量生成el-input并动态绑定v-model（实时获取input输入值和索引）”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2534.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！