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

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

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

赋值一定需要注意。需要setData的使用,这样页面才刷新,数据才会改变,并且分清that和this的使用


Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。其中的参数data用来设置初始数据,WXML 中的动态数据均来自对应 Page 的 data。


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

  • 页面js文件中这么写:
1. Page({
2. data: {
3.     message: 'Hello MINA!'
4.   }
5. })
  • wxml中这么写:
<view> {{ message }} </view>

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

function setData(){
    var that = this;
    that.setData({
      message: '新消息'
    })
}
  • 如果想在js文件中使用data中的数据写法如下:
function getData(){
    var that = this;
    console.log(that.data.message)
}
相关文章
|
小程序
微信小程序setData赋值,数据未更新
微信小程序setData赋值,数据未更新
1046 0
|
小程序 开发工具
微信小程序-data和mark
经过之前的文章介绍,我们已经知道了,在事件当中如何进行数据的传递,那么在介绍当中有两种传递方式,那么这两种方式分别有什么区别呢,我们一起来看看吧~
441 0
|
存储 缓存 小程序
微信小程序的跨页面传参以及data-方法的相关细节
微信小程序的跨页面传参以及data-方法的相关细节
1210 0
|
JSON 小程序 数据格式
微信小程序数据赋值错误不停地报 SyntaxError: Unexpected end of JSON input错误
微信小程序数据赋值错误不停地报 SyntaxError: Unexpected end of JSON input错误
647 0
微信小程序数据赋值错误不停地报 SyntaxError: Unexpected end of JSON input错误
|
小程序
微信小程序修改data中对象的属性值
微信小程序修改data中对象的属性值
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
753 0
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
400 0
在线课堂+工具组件小程序uniapp移动端源码
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
451 1
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
4407 3
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
797 0
微信小程序更新提醒uniapp