Vue.js 关于v-for动态绑定v-model，并实时获取input输入值和索引

如何动态绑定V-model

今天在尝试绑定的时候出来很多问题，而找了很多博客，描述的比较乱。

于是记录一下我的解决方法

动态绑定V-model

 <el-form>
          <el-form-item v-for="(item,index) in form" :key="index"  :label="item.title">
            <el-input v-model="item.modelName"  @input.native="change($event,index)" :placeholder="item.placeholder"></el-input>
          </el-form-item>
</el-form>

 data() {
    return {
      form: [
        {
          title: "用户名",
          placeholder: "输入用户名",
          modelName:'h'
        },
        {
          title: "密码",
          placeholder: "输入密码",
          modelName:'2'
        },
        {
          title: "确认密码",
          placeholder: "再次输入密码",
          modelName:'3'
        }]
    };
  }

其实v-for动态绑定model和绑定其他元素没有大多差别，只要一点需要注意一下，正常动态绑定需要在属性前加：（v-on）这个语法糖，唯独绑定v-model时不用添加，在写的时候也是纠结了半天，至于原因我还没有查找，希望有评论大神指出。

获得键盘实时输入的值和input输入框的索引

输入值实时获取

 <el-input v-model="item.modelName"  @input.native="change($event,index)" :placeholder="item.placeholder"></el-input>

通过@input.native来监听输入框实时输入的值，注意：需要添加.native后缀。VUE官网有相应解释（链接）

获得索引

 methods: {
    change: function(e,index) {
      console.log(e.target.value);//实时获取输入值
      console.log(index);//获取点击输入框的索引
    }
  }