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, }) } })