微信小程序 双向数据绑定

在微信小程序中,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]
    });
  }

猜你喜欢

转载自blog.csdn.net/tsfx051435adsl/article/details/83105321