快捷導(dǎo)航

詳解微信小程序中數(shù)據(jù)雙向綁定如何實(shí)現(xiàn)

更新時(shí)間：2023年05月30日 08:46:24 作者：會(huì)編碼的派大星

最近在小程序的開(kāi)發(fā)過(guò)程中,需要用到雙向綁定,遇到報(bào)錯(cuò)才知道微信本身是不支持對(duì)象雙向綁定的,鏖戰(zhàn)一番找到解決方案,下面這篇文章主要給大家介紹了關(guān)于微信小程序中數(shù)據(jù)雙向綁定如何實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下

前言

官方文檔：微信小程序雙向綁定語(yǔ)法

在 WXML 中，普通的屬性的綁定是單向的。例如：

<input value="{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->{value}}" />

如果使用 this.setData({ value: ‘leaf’ }) 來(lái)更新 value ，this.data.value 和輸入框的中顯示的值都會(huì)被更新為 leaf ；但如果用戶修改了輸入框里的值，卻不會(huì)同時(shí)改變 this.data.value 。

如果需要在用戶輸入的同時(shí)改變 this.data.value ，需要借助簡(jiǎn)易雙向綁定機(jī)制。此時(shí)，可以在對(duì)應(yīng)項(xiàng)目之前加入 model: 前綴：

<input model:value="{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->{value}}" />

這樣，如果輸入框的值被改變了， this.data.value 也會(huì)同時(shí)改變。同時(shí)， WXML 中所有綁定了 value 的位置也會(huì)被一同更新，數(shù)據(jù)監(jiān)聽(tīng)器也會(huì)被正常觸發(fā)。

一、通過(guò) input 的 bindinput 事件實(shí)現(xiàn)

這里建議吧 bindinput 換成 bindblur 在輸入框失去光標(biāo)時(shí)再去賦值。

官方解釋：setData 都會(huì)觸發(fā)邏輯層虛擬 DOM 樹(shù)的遍歷和更新，也可能會(huì)導(dǎo)致觸發(fā)一次完整的頁(yè)面渲染流程。

合理使用 setData 官方文檔

WXML 代碼

<view class="my-page">
  <form catchsubmit="formSubmit">
    <view class="form-item">
      <view class="form-label">昵稱</view>
      <view class="form-input">
        <input type="text" value="{{ form.nickName }}" data-prop="form.nickName" bindinput="BindInput" placeholder="請(qǐng)輸入昵稱" />
      </view>
    </view>
    <view class="form-item">
      <view class="form-label">簡(jiǎn)介</view>
      <view class="form-input">
        <input type="text" value="{{ form.introduce }}" data-prop="form.introduce" bindinput="BindInput" placeholder="請(qǐng)輸入簡(jiǎn)介" />
      </view>
    </view>
    <view class="btn-area">
      <button style="margin: 30rpx auto" type="primary" formType="submit">Submit</button>
    </view>
  </form>
</view>

TS 代碼

Page({
  data: {
    form: {
      nickName: ''
    }
  },
  onLoad() { },
  onReady() { },
  formSubmit() {
    console.log(this.data.form)
  },
  BindInput(e: any) {
    this.setData({
      [`${e.currentTarget.dataset.prop}`]: e.detail.value
    })
  }
})

輸出結(jié)果

二、通過(guò) model:value 實(shí)現(xiàn)

WXML 代碼

<view class="my-page">
  <form catchsubmit="formSubmit">
    <view class="form-item">
      <view class="form-label">昵稱</view>
      <view class="form-input">
        <input name="nickName" type="text" model:value="{{ form.nickName }}" placeholder="請(qǐng)輸入昵稱" />
      </view>
    </view>
    <view class="form-item">
      <view class="form-label">簡(jiǎn)介</view>
      <view class="form-input">
        <input name="introduce" type="text" model:value="{{ form.introduce }}" placeholder="請(qǐng)輸入簡(jiǎn)介" />
      </view>
    </view>
    <view class="btn-area">
      <button style="margin: 30rpx auto" type="primary" formType="submit">Submit</button>
    </view>
  </form>
</view>

TS 代碼

Page({
  data: {
    form: {
      nickName: '',
      introduce: '',
    },
  },
  onLoad() { },
  onReady() { },
  formSubmit(e: any) {
    this.setData({
      form: e.detail.value
    })
    console.log(this.data.form);
  },
})

輸出結(jié)果

WXSS 代碼

.my-page {
  padding: 30rpx;
}
.form-item {
  display: flex;
  align-items: center;
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1rpx solid #eee;
}
.form-item .form-label {
  height: 100%;
  width: 180rpx;
  text-align: center;
}
.form-item .form-input {
  width: calc(100% - 180rpx);
}
.form-item .form-input input {
  width: 100%;
  height: 80rpx;
}

總結(jié)

到此這篇關(guān)于微信小程序中數(shù)據(jù)雙向綁定如何實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)微信小程序數(shù)據(jù)雙向綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: