微信小程序前端开发实现双向数据绑定
现在公司有一个要求要实现这样的一个功能：
先来看html代码：
js代码：
html代码:
<view class="weui-form-preview"wx:for="{{customerData}}" wx:key="idx" wx:for-index="idx" wx:for-item="item">
<view class="weui-form-preview__hd">
<view class="weui-form-preview__item">
<view class="weui-form-preview__label">客户信息</view>
<view class="weui-form-preview__value_in-hd" bindtap="addCustom" wx:if="{{!item.del}}">新增客户</view>
<view class="weui-form-preview__value_in-hd" data-idx="{{idx}}" bindtap="delCustom" style="text-align: left" wx:if="{{item.del}}">[删除]</view>
</view>
</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell ">
<view class="weui-cell__hd">
<view class="weui-label">客户姓名</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" value="{{item.name}}" data-obj="name" data-idx="{{idx}}" bindinput="inputedit" disabled="{{item.disabled}}" placeholder="请输入客户姓名" />
</view>
</view>
<view class="weui-cell ">
<view class="weui-cell__hd">
<view class="weui-label">手机号码</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" value="{{item.phone}}" data-obj="phone" data-idx="{{idx}}" bindinput="inputedit" disabled="{{item.disabled}}" placeholder="请输入手机号码" />
</view>
</view>
<view class="weui-cell ">
<view class="weui-cell__hd">
<view class="weui-label">证件号码</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" value="{{item.idnum}}" data-obj="idnum" data-idx="{{idx}}" bindinput="inputedit" disabled="{{item.disabled}}" placeholder="请输入证件号码" />
</view>
</view>
</view>
</view>
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{
}