小程序中的增删改查

近日有款小程序需求：添加个人信息，删除个人信息，修改个人信息，查看个人信息（增、删、改、查）

1.首先我们在data中声明一个数组用于渲染信息列表

data:{
	list: [],
	name: "",
    tel: "",
    id_number: "",
}

2.一开始我们就在页面for循环数组（list），循环我们就不多做解释了

3.在添加的信息的时候我们要首先获取逐条的个人信息（拿实际中举例：name 、tel 、id_number是我们要获取的信息），简单说下获取输入框的值方法bindinput

wxml

<view class="flex">
	<view class="ipt-title">姓名</view>
	<input type="text" bindinput="bindname" placeholder="请输入姓名" value="{{name}}"></input>
</view>

js

bindname(e) {
   this.setData({
     name: e.detail.value
   })
 },

4.增 我们把获取到的信息组装成一个对象push到数组中，然后再this.setData下就能实时的添加到页面中了

var msgarr = {
	name: this.data.name,
	tel: this.data.tel,
	id_number: this.data.id_number
}
this.data.list.push(msgarr)

this.setData({
  	list: this.data.list
})

5.删 当我们点击删除的时候要删除对应的个人信息并且实时更新，需要绑定一个data-index=’{{index}}’，及时的获去数组的下标，对应删除

<view class="handle-btn" data-index='{{index}}' bindtap="delete">删除</view>
delete(e) {
    var index = e.currentTarget.dataset.index
    this.data.list.splice(index, 1);
    this.setData({
      list: this.data.list
    })
},

6.改 编辑的时候只需要重新获取输入的信息重新给变量赋值即可

compile(e) {
    var editname = e.currentTarget.dataset.name;
    var editphone = e.currentTarget.dataset.phone;
    var editcard = e.currentTarget.dataset.card;
    this.setData({
      index: e.currentTarget.dataset.index,
      name: editname,
      tel: editphone,
      id_number: editcard
    })
},

7.查 就不多bb