微信小程序点击添加/删除表单

wxml :

<view class="container">
	<block wx:for="{{lists}}" wx:key="{{index}}">
		<input class='create-li' data-id="{{index}}" placeholder="请输入内容"></input>
		<text>第{{index + 1}}个</text>
	</block>
	<view class="foot">
		<button class='add-li' bindtap='addList'>添加选项</button>
		<button class='add-li' bindtap='delList'>删除选项</button>
	</view>
</view>

wxss :

.create-li{
  height: 50rpx;
  border-bottom: 2rpx solid #ccc;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
}

.foot{
  display: flex;
}

.add-li{
  width: 50%;
}

js :

Page({
  data: {
    lists:[]
  },
  
  //添加
  addList: function(){
    var  lists = this.data.lists;
    var newData = {};
    lists.push(newData);//实质是添加lists数组内容，使for循环多一次
    this.setData({
      lists: lists,
    })  
  },

  //删除
  delList: function () {
    var lists = this.data.lists;
    lists.pop();      //实质是删除lists数组内容，使for循环少一次
    this.setData({
      lists: lists,
    })
  }
})