直接上代码咯~

<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<div id="dictNo">
 <form class="form-horizontal" style="width: 700px;">
   <div class="form-group">
     <div class="col-sm-12" style="margin-left: -8px;">
       <button class="btn btn-primary" type="button" v-on:click="addOneDict">添加新格式</button>
     </div>
   </div>
</form>
<hr>
<div class="oldDictNoList" >
  <form class="form-horizontal" >
    <div class="form-group" v-for="(item,index) in dictList" style="width:700px;">
      <div class="row" >
        <div class="col-sm-3">
          <select class="form-control" v-model ="item.seletModel" >
            <option value="placeholder" >占位符</option>
            <option value="regex" >正则表达式</option>
          </select>
        </div>
        <div class="col-sm-7">
          <input type="text" style="width: 100%;height: 36px;padding-left: 5px;" v-model="item.dictValue"  required="required">
        </div>
        <div class="col-sm-2">
          <button class="btn btn-danger" type="button" :dataIndex="index" v-on:click="delThis(index)">删除</button>
        </div>
      </div>
    </div>
  </form>
</div>
 <button class="btn btn-info" type="button" v-on:click="save">保存</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>

<script>
  var app = new Vue({
    el: '#dictNo',
    data: {
      //dictValue:词典值,selectModel:选中类型
      dictList: [],
    },
    created: function () {
      this.fetchData(currentID)
    },
    methods: {
      //添加一条词典数据
      addOneDict: function () {
        this.dictList.push({dictValue: '', seletModel: "placeholder"})
      },
      //保存数据
      save: function () {
        console.log(this.dictList);

      },
      // 删除数据
      delThis: function (index) {
        this.dictList.splice(index, 1);
        console.log(this.dictList)
      },
      //获取数据
      fetchData:function (id) {

      }
    }
  });

</script>

即时预览点击查看

再来看效果

the end

欢迎留言交流,一起学习前端,一起学习vue~


扫描二维码,在手机上阅读!