微信小程序前端开发实现双向数据绑定

现在公司有一个要求要实现这样的一个功能：

先来看html代码：

js代码：

 

html代码:

客户信息

新增客户

[删除]

客户姓名

 

手机号码

证件号码

 

js代码：

Page({

data: {

customerData:[{

name:'李某某',

phone:'15975648767',

idnum:'440982345610103217',

disabled:false

}],

},

addCustom:function(){

this.setData({

customerData: this.data.customerData.concat({

del:true,

})

});

},

 

inputedit:function(e){

let dataset = e.currentTarget.dataset;

let value = e.detail.value;

this.data.customerData[dataset.idx][dataset.obj] = value;

this.setData({

customerData: this.data.customerData

});

 

},

delCustom:function(e){

 

let index = e.currentTarget.dataset.idx;

let data = this.data.customerData

data.splice(index,1)

this.setData({

customerData: data

});

 

}

})

 

css代码，我用的是weui框架，要在app.wxss引入：

/* 客户信息 */

.weui-form-preview__hd{

background:#F7F8FC;

padding:10px 16px;

}

.weui-form-preview__label{

font-size: 18px;

font-weight: bold;

color:#2F3943;

}

.weui-form-preview__value_in-hd{

font-size: 12px;

color:#3D7EFE;

}

.weui-form-preview__value{

text-align: left;

font-weight: bold;

font-size: 15px;

color:#2F3943

}

 

.weui-form-preview__hd:after{

border:none;

}

.weui-form-preview:after {

border-bottom:none;

}

 

.weui-input{

}