微信小程序怎样用setData修改字典和在数组中添加

news/2024/7/20 1:46:18 标签: 小程序, javascript

setData函数在小程序中具有同时修改前端和后端的功能,应该是进行数据修改中最常用的一个功能了。

修改data中的变量

wxml

<view>
  {{information}}
</view>
<view>
  <button type="primary" bindtap="click">修改信息</button>
</view>

js

javascript">// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    information:"你好!"
  },
  click(){
    this.setData({information:"hello world!"})
  },
})

前后端一起进行修改。
效果

修改字典

wxml

<view>
  {{information.name}}
  {{information.age}}
</view>
<view>
  <button type="primary" bindtap="click">修改信息</button>
</view>

js

javascript">Page({
  data: {
    information:{
      name:"张三",
      age:120
    }
  },
  click(){
    this.setData({'information.name':'李四'})//需要将字典和键用引号引起来
  },
})

修改数组

<view wx:for="{{informations}}" wx:key="key">
  {{item.name}}
  {{item.age}}
</view>
<view>
  <button type="primary" bindtap="click">修改信息</button>
</view>

js

javascript">Page({
  data: {
    informations:[
      {
      name:"张三",
      age:100
      },
      {
        name:"李四",
        age:120
      },
  ]
  },
  click(){
    this.setData({'informations[1].name':'王五'})
    this.setData({'informations[1].age':92})
  },
})

向数组中添加元素.

wxml

<view wx:for="{{informations}}" wx:key="key">
  {{item.name}}
  {{item.age}}
</view>
<view>
  <button type="primary" bindtap="click">修改信息</button>
</view>

js

javascript">Page({
  data: {
    informations:[
      {
      name:"张三",
      age:100
      },
      {
        name:"李四",
        age:120
      }
      
  ]
  },
  click(){ 
    var informations = this.data.informations//必须在暂存一下不然报错(说this.data.informations没有push方法,我也懵了)
    informations.push({name:"王五", age:"92"})
    this.setData({informations: informations})
  }
})


http://www.niftyadmin.cn/n/489840.html

相关文章

win10系统安装face_recognition

介绍 face_recognition是一个人脸识别库&#xff0c;号称识别准确率可达 99.38%。 因为写毕业设计要用到这个库&#xff0c;开始在Ubuntu上使用这个库&#xff0c;安装没有出现任何问题。今天在win10系统上想要安装这个库时却出现了问题&#xff0c;记录一下。 问题 face_re…

wxpython制作桌面悬浮球

介绍 使用wxpython制作一个类似于电脑管家一样的悬浮球。 功能 圆形窗口自动鼠标离开悬浮球自动贴边鼠标在悬浮球上自动弹出整个悬浮球 效果 代码 import wxclass myframe(wx.Frame):def __init__(self):super().__init__(parentNone,poswx.DefaultPosition,stylewx.FRAME…

OpenCV-python的imshow方法无法弹出窗口问题

问题 今天使用OpenCV的imshow方法预览摄像头捕捉的图像时&#xff0c;出现了显示窗口不弹出的问题&#xff0c;最后通过安装matplotlib库解决的。 使用的代码 import cv2 import os # 调用笔记本内置摄像头&#xff0c;所以参数为0&#xff0c;如果有其他的摄像头可以调整参…

PyAutoGUI使用

PyAutoGUI使用 ### 鼠标事件 获取屏幕大小&#xff0c;返回的为元组&#xff1a;width, height pyautogui.size() 检查坐标是否在屏幕内&#xff0c;返回bool值&#xff1a;pyautogui.onScreen(x, y) 获取鼠标位置&#xff0c;返回的为元组&#xff1a;currentMouseX, cur…

wxFormBuilder使用介绍

wxFormBuilder介绍 wxFormBuilder是一个开源&#xff0c;跨平台的所见即所得的图形用户界面生成器&#xff0c;可以翻译wxWidget GUI设计成C&#xff0c;Python&#xff0c;PHP&#xff0c;XRC格式。github项目地址 这个工具将wxPython设计用户图形界面的过程可视化。通过简单…

BFC(Block Formatting Context) 块级格式化上下文

BFC(Block Formatting Context) 块级格式化上下文 BFC就好像标签的一个属性&#xff0c;可以使一个区域具有独立渲染不影响其他区域的特性。 BFC常用的几个方式 float属性不为noneoverflow属性不为visibleposition属性为absolute或fixeddisplay属性为inline-blockcontain值为…

Vue的v-if与v-show的区别

Vue的v-if与v-show的区别 v-show和v-if都可以通过判断条件来决定页面的某个组件的是否在页面上显示&#xff0c;但它们在原理上却并不相同。了解它们的原理可以是我们写出更高质量的页面。 v-if v-if是条件渲染语句&#xff0c;它是真正的条件渲染。根据if后面的条件来决定某…

Less学习

Less&#xff08;css预处理器&#xff09;学习 less的优势 css使用不能看出html节点的嵌套结构&#xff0c;less的嵌套可以看出html的结构less提高的是程序员的编码效率&#xff0c;而不是运行的速度。 Less的使用方式 直接引入&#xff0c;style标签要做引入的less.js之上…