详解微信小程序中数据双向绑定如何实现
更新时间：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 树的遍历和更新，也可能会导致触发一次完整的页面渲染流程。
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轮播图之旋转木马效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
connection reset by peer问题总结及解决方案
这篇文章主要介绍了connection reset by peer问题解决方案的相关资料,这里整理了一些常见问题，及如何解决，需要的朋友可以参考下2016-10-10
这篇文章主要为大家分享了Bootstrap企业网站实战项目，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要为大家介绍了JavaScript实现JS弹窗的三种方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助<BR>2022-01-01
这篇文章主要为大家详细介绍了微信小程序自定义弹窗滚动与页面滚动冲突的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
就是判断一个元素是否存在于数组中的函数，既然js里string都有indexOf函数，为什么不在Array对象里设置一个这样的函数呢，其实就用indexOf这个思想挺好的，不知道制定JS标准的人是基于什么考虑，把这样一个如此常用的功能没考虑在内的。2015-04-04
这篇文章主要为大家详细介绍了JavaScript中实现检测用户是否在线的6种常用方法,文中的示例代码讲解详细,感兴趣的可以跟随小编一起学习一下2023-08-08
这篇文章主要为大家详细介绍了JavaScript实现简单打地鼠游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要为大家详细介绍了JavaScript实现经典贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
childNodes实现代码2009-04-04
最新评论