微信小程序 - this.setData() 属性名使用变量（key 动态属性）

已于 2024-07-29 15:09:24 修改
阅读量4.2k 收藏 3
点赞数 2
分类专栏： + Wechat 文章标签： javascript 开发语言 ecmascript wechat 微信小程序
于 2022-05-17 16:37:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/124824414
版权
+ Wechat 专栏收录该内容
122 篇文章 1131 订阅 ¥19.90 ¥99.00
订阅专栏
本文介绍了微信小程序中如何使用this.setData()动态设置属性，特别是在处理多个输入框双向绑定时，通过数组形式传递属性来避免重复代码。
摘要由CSDN通过智能技术生成

前言

我们多个输入框需要双向绑定的时候，会有很多函数使用 setData 进行赋值，遗憾的是每个函数代码几乎一致，仅仅修改的变量名不同而已。

在这里插入图片描述

解决方案

微信小程

了解本专栏 订阅专栏 解锁全文
王佳斌
关注
专栏目录
订阅专栏
微信小程序 this.setData
weixin_44291886的博客
06-21 288
this.setData：主要是用于将逻辑层的数据渲染到视图层，同时改变this.data中的数据 一.是以key,vlue的形式改变 1. //html <view> <text>{{food}}</text> //0 //1 <text>{{color}}</text> //red data中并没声明color 在setdata里边写了color </view> //js data:{ food:0 } onShow(){ co
微信小程序 this.setData（）
H_ZMY的博客
06-17 1072
lsetData（）函数用于将 data 从逻辑层传输到视图层，同时对应的改变this.data的值。Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。
微信小程序 —— setData()
一只想躺平却不敢躺平的小菜鸟
07-26 337
this.setData修改data数据（基础数据，数组、对象）
微信小程序中this.data 和 this.setData
前端小白的博客
10-04 2054
1、this.data：this.data 是一个对象，用于存储小程序页面的数据。例如，this.data.name 可以获取名为 name 的数据，this.data.name = ‘John’ 可以修改名为 name 的数据为 ‘John’。2、this.setData：this.setData 是一个方法，用于更新页面的数据并触发页面的重新渲染。在微信小程序中，this.data 和 this.setData 是两个用于处理数据的不同方式。this.data 是用于存储和访问小程序页面数据的对象。
必知小技巧：微信小程序this.setData修改对象中某个属性的值
热门推荐
Shids_的博客
12-24 1万+
必知小技巧：微信小程序this.setData修改对象中某个属性的值
微信小程序this.setData修改对象、数组中的值
weixin_45932157的博客
05-05 2691
需要注意的是，如果是简单变量，这里的参数名可以不加引号。经过测试，可以使用3种方式对data中的对象、数组中的数据进行修改。直接使用字符串，此种方式之前不可以，现在可以了，估计小程序库升级了。注意和第一种方法的对比，推荐还是使用第一种方法。
微信小程序——通过 this.setData 设置动态数据
最新发布
Jiaberrr的博客
09-10 270
字段的名称，值是要更新的内容。如果你尝试直接使用一个变量作为键，而不使用方括号，它将被视为字符串字面量，而不是变量名。方法用于将数据从逻辑层发送到视图层，同时改变对应的。设置动态的数据，但是需要遵循特定的语法规则。，你可以将变量作为对象的键，从而实现动态设置。方法接受一个对象，该对象的键是要更新的。是一个变量，它存储了要更新的。如果你想要设置动态的。
微信小程序 setData使用方法及常用错误解决办法
08-30
在微信小程序中，`setData` 是用于更新页面数据的关键方法，它允许开发者将数据从 JavaScript 层传递到 WXML（微信小程序的结构层），从而驱动页面视图的更新。然而，`setData` 在处理数组对象时有一些特殊的规定，...
小程序中this.setData的使用和注意事项
10-16
微信小程序作为当下流行的轻应用开发平台，为开发者提供了便捷的开发体验。在开发过程中，开发者经常会使用到this.setData方法，它...通过合理使用this.setData，开发者可以创建出流畅且用户体验良好的微信小程序应用。
[微信小程序]使用 this.setData 设置一个变量的方法
我的米饭
12-15 2297
常规的微信小程序里给一个 data 数据重新赋值，需要用 this.setData 方法传入这个数据的名称，如果你要设置的数据名称是一个动态的变量，则要修改一下写法，加入[ ]中括号： const _name = e.currentTarget.dataset.name || 'isShowDate' this.setData({ [_name]: false }) ...
微信小程序this.setData如何修改对象、数组中的值
weixin_42017221的博客
10-24 1507
data数据为三种情况数组对象对象中的数组。
微信小程序this.setData()对单个属性值、对象、数组的使用
qq_43235503的博客
06-15 2492
微信小程序this.setData()对单个属性值、对象、数组的使用
微信小程序开发系列（二十一）·wxml语法·setData（）修改数组类型数据（增加、修改、删除）
时光の尘的博客
03-07 2706
在微信小程序中，setData（）方法用于将数据从逻辑层发送到视图层，以实现页面数据的更新和视图的刷新。通过 setData（）方法可以更新页面上展示的数据，让用户看到最新的信息。当调用 setData（）方法时，需要传入一个对象，该对象包含需要更新的数据。在这里，key1，key2等表示要更新的属性名，value1，value2分别为对应的属性值。当调用 setData（） 后，相关属性的数据会被更新，并触发页面视图的重新渲染，以展示最新的数据。
微信小程序 this.setData高级用法(只更改单个数据)
qq_57952018的博客
06-20 501
微信小程序 this.setData高级用法(只更改单个数据)
【微信开发】小程序this.setData({})中对普通字段、数组以及数组对象进行赋值，对数组对象进行操作
weixin_57788079的博客
04-18 4694
字段赋值； 数组静态赋值； 数组动态赋值； 对象数组动态赋值； 组对象进行操作 ① 末位加数据； ② 中间或者开头加数据； ③删除数据；
微信小程序开发系列（十九）·wxml语法·setData（）修改数据
时光の尘的博客
03-06 2058
Page({data:{num: 1},// 更新 num// 获取数据})// 通过赋值的方式直接修改数据可以看出这种方法能够修改数据，但是不能改变页面上的数据：Page({data:{num: 1},// 更新 num// 获取数据// 通过赋值的方式直接修改数据//能够修改数据，但是不能改变页面上的数据})微信小程序中的setData()方法用于修改页面数据并实时更新视图，是实现动态数据绑定的重要方法之一。
微信小程序赋值后没响应，this.setData使用说明
lxc的点点滴滴
03-13 594
最近接触微信小程序原生开发，发现在js页面直接赋值后并不能在wxml页面立即回显，查找原因后才知道没有使用setData；应该后续还有更多形式，以后再补充！
微信小程序云开发：分类与搜索功能实现详解
"微信小程序首页的分类功能和搜索功能实现" 微信小程序作为轻量级的应用载体，其首页的用户体验至关重要，而这主要体现在分类功能和搜索功能上。在本文中，我们将探讨如何在微信小程序中实现这两种功能，以及利用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王佳斌

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值