微信小程序 双向数据绑定

在微信小程序中,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]
    });
  }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值