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

关注

原创最新推荐文章于 2026-07-28 16:17:31 发布 3.5k 阅读 AI 写同款· GEO 优化 ›

微信小程序面试内容整理-数据绑定 双向数据绑定指的是视图的变化会影响数据，数据的变化同样会更新视图。点击按钮时，increment 方法会增加 count 的值，并通过 setData 更新数据，视图也会随之自动更新。当用户在输入框中输入内容时，bindinput 事件会触发，并更新 inputValue 的值，从而更新视图。当数据发生变化时，视图会自动更新。是微信小程序中视图和数据的桥梁，自动同步数据和视图的变化，减少手动操作 DOM 的复杂度。：数据与视图之间的双向同步，视图的变化可以反映到数据，数据的变化也可以更新视图。阅读详情

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

先来看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{

}