在微信小程序中,js的数据和前端显示的数据是单数据流,也就是说,js里边的数据变了,前端能立刻显示;但如果前端数据变了,js不能改变。
举个例子
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">
<text space="ensp">接 待 人</text>
</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" name="manager" value="{{info.manager}}" />
</view>
</view>
在这里,当用户输入文本的时候,value的是用户输入的值,但是js里面 info.manager的值没有变;反之,用户在js里改变info.manager时,前端能改变。
如果实现双向数据流,该怎么处理,不想一个个的获取,想在用户输入的时候直接赋值到js。
简单实现:
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">
<text space="ensp">接 待 人</text>
</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" name="manager" bindinput="inputedit" data-obj="info" data-item="manager" value="{{info.manager}}" />
</view>
</view>
inputedit: function (e) {
// 1. input 和 info 双向数据绑定
let dataset = e.currentTarget.dataset;
//data-开头的是自定义属性,可以通过dataset获取到,dataset是一个json对象,有obj和item属性,可以通过这两个实现双向数据绑定,通过更改这两个值,对不同name的变量赋值
let value = e.detail.value;
this.data[dataset.obj][dataset.item] = value;
this.setData({
obj: this.data[dataset.obj]
});
}