专栏首页前端资源微信小程序:data参数的取值与赋值

微信小程序:data参数的取值与赋值

根据微信小程序API可以得知:

Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。

data 是页面第一次渲染使用的初始数据。

页面加载时,data 将会以JSON字符串的形式由逻辑层传至渲染层,因此data中的数据必须是可以转成JSON的类型:字符串,数字,布尔值,对象,数组。

渲染层可以通过 WXML 对数据进行绑定。

下面我们来看一下 data 参数的取值与赋值:

WXML: 通过花括号进行数据绑定

<view>{{text}}</view>

JS部分: 设置 data 的初始值

Page({
  data: {
    text: 'Hello world!',
  },
})

这样就可以显示 text 设置的内容了:

data的赋值和取值:

给 data 内的变量赋值,可以通过 setData 给他进行设置,取值可以用 this.data.object 的方式获取。

我们在页面加载完成后来一个赋值和取值的操作,代码如下:

onLoad: function (options) {
    let that = this;
    that.setData({
      text: 'Happy Day!',//赋值
    })
    console.log(that.data.text);//取值
},

这样 text 的值就改变,可以在控制台打印出现在的值:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • web前端优化,减少http请求,提高页面加载速度

    80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,样式表,脚本,Flash等等。减少组件数必然能够减少页面提交的HTTP请求...

    德顺
  • iOS微信浏览器input聚焦导致页面上移,不能恢复的解决方法

    H5页面在iOS系统微信浏览器中,input focus 聚焦时页面会被上推,导致页面整体上移。blur 失焦后不能恢复,再次点击 input 时没反应,不能聚...

    德顺
  • 微信小程序动态设置标题

    德顺
  • 为什么你觉得Matplotlib用起来很困难?因为你还没看过这个思维导图

    Matplotlib是一个流行的Python库,可以很容易地用于创建数据可视化。然而,设置数据、参数、图形和绘图在每次执行新项目时都可能变得非常混乱和繁琐。而且...

    HuangWeiAI
  • 检测假新闻:比较不同的分类方法的准确率

    他们肯定是假的。在7月15日时,Twitter出现了一个大问题,大账户被黑客入侵,要求比特币捐款,并承诺将捐款金额翻倍。所以即使这些推特是真实的,它们也包含了虚...

    deephub
  • 前端开发我为什么选择cordova

    cordova与phonegap有什么关系? phoengap 官方网址:http://phonegap.com 如果能了解一个框架的兴起还是一件比较有趣...

    xiangzhihong
  • 反-反爬虫:用几行代码写出和人类一样的动态爬虫

    本文将从 Phantomjs 动态爬虫介绍起,用3行代码傻瓜式完成基于 Casper 的动态爬虫来绕过对抗策略获取页面数据。

    T4erg
  • ThinkPHP5错误解析之variable type error:array

    在TP5的post提交方式中,有一个坑爹的bug就是post提交数据不能提交数组。 请注意是不能提交数组形式的数据,而不是单纯的数据。举个例子:注意以下2种格...

    紫旭Blog - blog.zixutech.cn
  • 腾讯云服务器linux(Centos7)系统安装Python3(搬运)

    原创链接:https://www.cnblogs.com/zzqit/p/10087680.html

    改变的只有世界
  • 2020年---最新「前端学习体系与前端概述」(面经必读)

    最简化工具有 chrome浏览器、 editplus编辑器、pxCook量图器。后续随着课程推进,会慢慢介绍各种辅助工具,在这里就罗列,以免干扰新手小白。

    用户5827212

扫码关注云+社区

领取腾讯云代金券