v-for 实现模块的增加、删除以及v-for条件下的input双向绑定

点击添加按钮，实现某个模块内容的增加
点击删除按钮，实现当前模块的删除
初始化效果：

1. html部分代码如下：

<div class="row padleft padingtop">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
         <span class="Iptstitle">提单号</span>
         <input  class="addIpt" type="text" name="billnum" placeholder="请输入提单号"/>
     </div>
     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
         <span class="Iptstitle">做箱日期 </span>
         <input  class="addIpt" type="text" name="makedate" placeholder="请输入提单号"/>
     </div>
 </div>
 <div class="padleft" style="text-align: right;margin-right:1%;">
     <button type="button" class="tableyz yanzbtns" @click="addItem">添加信息</button>
 </div>
 <!-- 输入框以及选择按钮等整体布局------开始 -->
 
 <div class="about_content entryIpt_layout" v-for="(item,index) in lists" :key="index">
     <div class="row padleft">
         <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
             <span class="Iptstitle">司机姓名</span>
             <input class="addIpt" type="text" name="driver_name"  disabled v-model="item.driver_name"/>
         </div>
         <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
             <span class="Iptstitle">手机号&emsp;</span>
             <input class="addIpt" type="text" name="tel"  maxlength="11" v-model="item.phone_tel" placeholder="请输入手机号" @change="print"/>
         </div>
         <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
             <span class="Iptstitle">车牌号&emsp; </span>
             <input class="addIpt" type="text" name="plate_num"  v-model="item.plate_num" placeholder="请输入车牌号"/>
         </div>
         <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
             <span class="Iptstitle">运费&emsp;&emsp;</span>
             <input class="addIpt" type="text" name="fare_cost" v-model="item.fare_cost" placeholder="请输入运费"/>
         </div>
     </div>
     <div style="text-align: right;margin-right:1%;">
         <button class="tabledel yanzbtns" @click="deleteItem(index)">删除</button>
     </div>
 </div>
 <!-- 输入框以及选择按钮等整体布局------结束 -->
 <!-- 底部按钮布局 ---------开始--->
 <div class="footbtns">
     <button type="button" class="hx_repost postbtns" @click="senddata()>发送</button>
     <button type="button" class="hx_cancelpost postbtns" data-dismiss="modal">取消</button>
 </div>
 <!-- 底部按钮布局 ---------结束--->

2. js部分代码如下：

data: function(){
      return{
          lists:[{}],//加个空元素使默认显示一个模块
            driver_name:"",//v-for中的input值 先声明为数组  在页面中用index来实现双向绑定
            phone_tel:"",//v-for中的input值
            plate_num:"",//v-for中的input值   
            fare_cost:"",//v-for中的input值
      }
  },
  methods:{
  	addItem(event){
            //将输入框的内容对象赋值给aa
            //方法1
            // var aa = {driver_name:"",phone_tel:"",plate_num:"",fare_cost:""}
            //this.lists.push(aa);
            //方法2
            this.lists.push({});
        },
        deleteItem(index) {
            console.log(index);
            if(index!=0){
                this.lists.splice(index,1);
                 return true;
            }else{
                return false;
            }
            // console.log(this.lists);
        },
        //取input输入框内的值  先在页面部分加事件
        print(event){
            console.log("input的输入内容",event.target.value);
        },
        //点击发送
        senddata() {
            console.log(this.lists);
        }
  }

3. css部分代码如下：

.padingtop{
	padding-top: 32px;
}
.padleft{
	padding-left: 20px;
}
.tableyz {
	color: #ffffff;
	background: #2DA7E0;
}

.tabledel {
	color: #2DA7E0;
	background: none;
}
.Iptstitle{
	padding-right:10px;
	vertical-align:top;
}
.yanzbtns {
	margin-top: 14px;
	padding: 4px 20px;
	text-align: center;
	border: 1px solid #2DA7E0;
	border-radius: 4px;
	font-family: PingFangSC-Semibold;
	font-size: 16px;
	letter-spacing: 0;
	line-height: 16px;
}
input.addIpt{
	border-radius: 3px;
	background: #ffffff;
	padding: 4px 0;
	text-indent:6px;
	font-size:14px;
	color:#333333;
}
.entryIpt_layout input {
	width: 95%;
}
.entryIpt_layout input[disabled] {
	background: #ececec;
}
.entryIpt_layout {
	padding-top: 30px;
	padding-bottom: 40px;
}

.entryIpt_layout:not(:last-child) {
	border-bottom: 1px solid #E8E8E8;
}

最终效果如图：