微信小程序之装逼失败篇

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

不能因为我曾经在群里说过会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的面向对象，好扯啊，慢慢看吧！