脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序数据双向绑定

详解微信小程序中数据双向绑定如何实现

 更新时间：2023年05月30日 08:46:24   作者：会编码的派大星  
最近在小程序的开发过程中,需要用到双向绑定,遇到报错才知道微信本身是不支持对象双向绑定的,鏖战一番找到解决方案,下面这篇文章主要给大家介绍了关于微信小程序中数据双向绑定如何实现的相关资料,需要的朋友可以参考下

前言

官方文档：微信小程序双向绑定语法

在 WXML 中，普通的属性的绑定是单向的。例如：

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

如果使用 this.setData({ value: ‘leaf’ }) 来更新 value ，this.data.value 和输入框的中显示的值都会被更新为 leaf ；但如果用户修改了输入框里的值，却不会同时改变 this.data.value 。

如果需要在用户输入的同时改变 this.data.value ，需要借助简易双向绑定机制。此时，可以在对应项目之前加入 model: 前缀：

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

这样，如果输入框的值被改变了， this.data.value 也会同时改变。同时， WXML 中所有绑定了 value 的位置也会被一同更新， 数据监听器 也会被正常触发。

一、通过 input 的 bindinput 事件实现

这里建议吧 bindinput 换成 bindblur 在输入框失去光标时再去赋值。

官方解释：setData 都会触发逻辑层虚拟 DOM 树的遍历和更新，也可能会导致触发一次完整的页面渲染流程。

合理使用 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="请输入昵称" />
      </view>
    </view>
    <view class="form-item">
      <view class="form-label">简介</view>
      <view class="form-input">
        <input type="text" value="{{ form.introduce }}" data-prop="form.introduce" bindinput="BindInput" placeholder="请输入简介" />
      </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
    })
  }
})

输出结果

二、通过 model:value 实现

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="请输入昵称" />
      </view>
    </view>
    <view class="form-item">
      <view class="form-label">简介</view>
      <view class="form-input">
        <input name="introduce" type="text" model:value="{{ form.introduce }}" placeholder="请输入简介" />
      </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);
  },
})

输出结果

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;
}

总结

到此这篇关于微信小程序中数据双向绑定如何实现的文章就介绍到这了,更多相关微信小程序数据双向绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS 跳转页面延迟2种方法

    JS 跳转页面延迟2种方法

    js跳转页面想必大家不会很陌生吧，在浏览页面的时候经常会碰到这种现象存在如果可以延迟的话是不是会更委婉一点呢，接下来为大家介绍下如何实现，感兴趣的朋友可以参考下哈
    2013-03-03
  • bootstrap table合并行数据并居中对齐效果

    bootstrap table合并行数据并居中对齐效果

    这篇文章主要为大家详细介绍了bootstrap table合并行数据并居中对齐效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-10-10
  • 在小程序中使用Echart图表的示例代码

    在小程序中使用Echart图表的示例代码

    这篇文章主要介绍了在小程序中使用Echart图表的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • JavaScript常用的3种弹出框(提示框 alert/确认框 confirm/输入框 prompt)

    JavaScript常用的3种弹出框(提示框 alert/确认框 confirm/输入框 prompt)

    三种弹框在系统中都是同步执行的，也就是说，三种弹框中的任一弹框弹出，代码都不在执行，直到点击确认或取消，关闭弹窗后，代码继续执行，本文通过实例代码给大家分享JS常用的3种弹出框，感兴趣的朋友一起看看吧
    2022-07-07
  • DIV层之拖动、关闭、打开效果代码

    DIV层之拖动、关闭、打开效果代码

    非常不错的效果，适合在当前页打开测试窗口，图片等
    2008-09-09
  • JS+css 图片自动缩放自适应大小

    JS+css 图片自动缩放自适应大小

    编辑器上传的图片太大了，把FF和IE撑的走形，所以希望图片在某些页面里要有固定大小，如果需要某个范围，用getElementByname来设定，也是一个道理：
    2013-08-08
  • JS获取随机数和时间转换的简单实例

    JS获取随机数和时间转换的简单实例

    下面小编就为大家带来一篇JS获取随机数和时间转换的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 利用D3.js实现最简单的柱状图示例代码

    利用D3.js实现最简单的柱状图示例代码

    D3.js是一个基于数据操作文档JavaScript库。D3帮助你给数据带来活力通过使用HTML、SVG和CSS。D3重视Web标准为你提供现代浏览器的全部功能，而不是给你一个专有的框架。最近在学习D3.js，这个例子是通过d3.js画一个简单的柱状图。下面来一起看看吧。
    2016-12-12
  • uniapp  微信跳转至半屏的使用示例

    uniapp  微信跳转至半屏的使用示例

    这篇文章主要介绍了uniapp  微信跳转至半屏的使用示例,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-08-08
  • javascript实现瀑布流加载图片原理

    javascript实现瀑布流加载图片原理

    这篇文章主要为大家介绍了javascript实现瀑布流加载图片效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-02-02

最新评论