完美应对微信小程序的数据管理，从数据双向绑定开始-Toy模板网

这篇具有很好参考价值的文章主要介绍了完美应对微信小程序的数据管理，从数据双向绑定开始。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

微信小程序因为诸多限制所以它无法像 vue 那样通过指令进行数据绑定，那微信小程序有没有什么办法可以实现数据的双向绑定呢？今天给大家分享两种微信小程序数据绑定的方法。

通过 model:value 绑定

当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

.wxml 文件

<form catchsubmit="formSubmit">
    <view class="formItemBox">
        <view>姓名</view>
        <view>
            <input name="name" model:value="{{ formData.name }}" type="text" placeholder="请输入姓名" />
        </view>
    </view>
    <view class="formItemBox">
        <view>年龄</view>
        <view>
            <input name="age" model:value="{{ formData.age }}" type="text" placeholder="请输入年龄" />
        </view>
    </view>
    <view class="formItemBox">
        <view>号码</view>
        <view>
            <input name="number" model:value="{{ formData.number }}" type="text" placeholder="请输入号码" />
        </view>
    </view>
    <view class="formItemBox">
        <view>地址</view>
        <view>
            <input name="address" model:value="{{ formData.address }}" type="text" placeholder="请输入地址" />
        </view>
    </view>
    <!-- 底部操作按钮 -->
    <view>
        <button formType="submit">提交</button>
    </view>
</form>

.js 文件

Page({
  data: {
    // 绑定的数据
    formData: {
      name: "",
      age: "",
      number: "",
      address: "",
    },
  },
  // 提交操作
  formSubmit(e) {
    console.log(e.detail.value); //提交的数据
  },
})

点击提交操作后：

微信小程序双向绑定,小程序,微信小程序,小程序

通过 bindinput 方法

首先用标签属性 data- 绑定 js 中的 data 参数，再通过 bandinput 事件获取 key 值，最后利用模板字符串赋值给 data 中的值。

.wxml 文件

<view>
    <view class="formItemBox">
        <view>姓名</view>
        <view>
            <input data-gater="formData.name" bindinput="inputFrame" value="{{ formData.name }}" type="text"
                placeholder="请输入姓名" />
        </view>
    </view>
    <view class="formItemBox">
        <view>年龄</view>
        <view>
            <input data-gater="formData.age" bindinput="inputFrame" value="{{ formData.age }}" type="text"
                placeholder="请输入年龄" />
        </view>
    </view>
    <view class="formItemBox">
        <view>号码</view>
        <view>
            <input data-gater="formData.number" bindinput="inputFrame" value="{{ formData.number }}" type="text"
                placeholder="请输入号码" />
        </view>
    </view>
    <view class="formItemBox">
        <view>地址</view>
        <view>
            <input data-gater="formData.address" bindinput="inputFrame" value="{{ formData.address }}" type="text"
                placeholder="请输入地址" />
        </view>
    </view>
    <!-- 底部操作按钮 -->
    <view>
        <button bindtap="submit">提交</button>
    </view>
</view>

.js 文件

Page({
  data: {
    // 绑定的数据
    formData: {
      name: "",
      age: "",
      number: "",
      address: "",
    },
  },
  // 提交操作
  submit() {
    console.log(this.data.formData); //提交的数据
  },
  // input事件(内容改变时触发)
  inputFrame(e) {
    this.setData({
      [`${e.currentTarget.dataset.gater}`]: e.detail.value
    })
    console.log(this.data.formData);
  },
})

input框输入和提交时：

微信小程序双向绑定,小程序,微信小程序,小程序

最后附上 .wxss 文件文章来源地址https://www.toymoban.com/news/detail-516698.html

.formItemBox {
    display: flex;
    margin: 0rpx 10rpx;
    padding: 14rpx 0rpx;
    border-bottom: 1px solid gainsboro;
}

.formItemBox view:first-child {
    width: 20%;
    color: #323333;
    font-size: 28rpx;
}

.formItemBox view:last-child {
    width: 80%;
}

input {
    font-size: 24rpx;
    color: #626263;
}