vue前端框架下实现动态输入框

vue前端框架下实现动态输入框

今天用vue做项目的时候遇到一个需求，实现输入框动态增加，具体就是某一项输入可以有若干个，但至少有一个，话不多说，上效果嗷嗷~~

点击加号变成下图

点击垃圾桶删除~~
下面贴代码~
嗷呜~

HTML：

//固定输入框~~
          <el-row>
            <el-tag class="title" type="info">参数</el-tag>
          </el-row>
          <el-form-item label="参数" prop="ParameterDataList">
            <el-col :span="20">
              <el-input v-model="postForm.ParameterDataList[0]" placeholder="请填写"></el-input>
            </el-col>
            <el-col :span="4">
              <el-button size="small" type="info" icon="el-icon-plus" @click="addItem"></el-button>
            </el-col>
          </el-form-item>
//动态变化啦哈哈哈哈哈哈，注意el-form-item的v-if中的条件，是为了使固定输入框中的输入和动态变化产生的输入框中的输入不冲突~~
          <div v-for="(item, index) in postForm.ParameterDataList" :key="index">
            <el-form-item label="参数" v-if="index !== 0">
              <el-col :span="20">
                <el-input v-model="postForm.ParameterDataList[index]" placeholder="请填写"></el-input>
              </el-col>
              <el-col :span="4">
                <el-button size="small" type="info" icon="el-icon-delete" @click="deleteItem(item, index)"></el-button>
              </el-col>
            </el-form-item>
          </div>

js代码

data () {
    return {
      postForm: {
        title: '',
        description: '',
        ParameterDataList: []
      }
    }
 },
 methods: {
	 addItem () {
	    this.postForm.ParameterDataList.push('')
     },
     deleteItem (item, index) {
       this.postForm.ParameterDataList.splice(index, 1)
     }
 }

完结撒花~