微信小程序数双向数据绑定

老板突然兴起，让我做个小程序，当时我的心情是这样的

不能因为我曾经在群里说过会JS就让我做小程序啊，奴家做不到啊！

转念一想，人在屋檐下，不得不低头，只能硬着头皮上了！

然后我就去小程序官网下了个所谓的IDE，看了一遍文档，看着还行，毕竟iOS出身，一看就懂！

然后过了一个星期，老板夸我学得快，然后就没有然后嘞。。。说好的做小程序呢，UI呢！设计呢！

正当我觉得小程序可以放下的时候，一个群里有人问怎么动态添加删除Input，就像这样

上午问一遍，下午问一遍，我看不下去了，就装了一个逼，实在是后悔啊

没办法，自己装的逼，跪着也要装完，只能打开坑爹的IDE，开始写demo

最开始我以为用wx:for循环就可以啦，谁知道写完添加倒是添加的很6，但是删除的时候只能删除最后一个，最后想到了用value属性绑定data，输入数据流向data，实现双向邦定。。。

index.wxml

<view class="">
<!--<block wx:for="{{divList}}" wx:key="*this">-->
<view class="contentView" wx:for="{{divList}}" >
   <view class="del" bindtap="del" data-index="{{index}}">删除</view>
  <input data-index="{{index}}" class="conteneInput" placeholder="测试数组添加和删除" bindinput="bindKeyInput" value="{{item.content}}"/>
</view>
 
<!--</block>-->
<view class="add" bindtap="add">添加</view>
</view>

index.wxss

.add{
  width: 100%;
  height: 30px;
  text-align: center;
  background-color: rebeccapurple;
  margin-top: 10px;
  line-height: 30px;
}

.del{
  width: 50px;
  height: 50px;
  background-color: orangered;
}
.conteneInput{
  float: left;
}
.contentView{
  display: flex;
  margin: 10px;
}

index.js

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {

    divList:[]
  },
  onLoad: function () {
    
  },
  
  add:function(e){
    var arr = this.data.divList;
    var obj = {
      content:''
    }
    arr.push(obj)
    this.setData({
      divList: arr
    })
  },
  del:function(e){
    var arr = this.data.divList;
    var index = e.currentTarget.dataset.index
    arr.splice(index,1)
    this.setData({
      divList: arr
    })
  },
  bindKeyInput: function(e) {
    console.log(e)
    var arr = this.data.divList
    var obj = arr[e.currentTarget.dataset.index]
    obj.content = e.detail.value

    this.setData({
      divList:arr
    })
  }
})

实现的效果是这样的

最后小伙儿按照我的代码也实现了他想要的效果，总算装逼成功，不辱使命！

虽然小程序带了一个小字，但是写起来也很费力，JS基础也看了一遍，但是JS的高阶函数搞得我头晕，还有JS的面向对象，好扯啊，慢慢看吧！