微信小程序--data的赋值与取值的几种方式

通过小程序官方文档可知:

赋值一定需要注意。需要setData的使用,这样页面才刷新,数据才会改变,并且分清that和this的使用
Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。其中的参数data用来设置初始数据,WXML 中的动态数据均来自对应 Page 的 data。

所以如果页面需要显示动态数据必须要把数据更新到data中对应的变量中。

  • 页面js文件中这么写:

    复制代码
    Page({
      data: {
        message: 'Hello MINA!'
      }
    })
  • wxml中这么写:

    复制代码
    <view> {{ message }} </view>

如果该数据在操作过程中发生变化,需要将新数据重新绑定到该变量中,写法如下:

复制代码
function setData(){
    var that = this;
    that.setData({
      message: '新消息'
    })
}
  • 如果想在js文件中使用data中的数据写法如下:

    复制代码
    function getData(){
        var that = this;
        console.log(that.data.message)
    }
相关推荐
it-10241 小时前
抖音快手短视频去水印微信小程序/一键去水印/小程序去水印接口代码
微信小程序·小程序·php
万岳科技17 小时前
教育培训小程序如何构建线上线下一体化教学体系
小程序·apache
全职计算机毕业设计17 小时前
智慧仓储出入库小程序+后台管理系统 —— 全流程数字化资产管控平台
小程序
万岳软件开发小城20 小时前
2026在线教育系统源码搭建指南,支持APP+H5+小程序
小程序·在线教育系统源码·教育app开发·教育小程序开发·教育网校平台搭建
夏天测20 小时前
微信小程序自动化漏洞挖掘流水线:从缓存提取到密钥验证全流程实战
python·网络安全·微信小程序·漏洞挖掘
万岳科技系统开发1 天前
教育培训小程序搭建实战:打造一体化教学服务平台
小程序
一秒公司1 天前
网站、小程序与APP备案流程及周期详解(2026版)
小程序
it-10241 天前
微信小程序短视频去水印/抖音短视频去水印/免费去水印源码
微信小程序·小程序·视频去水印
Geek_Vison2 天前
2026 跨端框架横评:FinClip、Taro、uni-app、Remax、mPaaS 五款工具技术+业务双维度测评
小程序·uni-app·taro·mpaas·小程序容器
kidding7232 天前
高效备忘清单工具类小程序
前端·计算机网络·微信小程序·小程序