微信小程序在data中定义页面的数据,以及数据如何使用

小程序代码示例

Page({
  data: {
    // 字符串类型的数据
    info: 'init data',
    imgSrc: "../../images/1.png",
    randNum1: Math.random() * 10,
    randNum2: Math.random().toFixed(2),
    // 数组类型的数据
    msgList: [{msg: 'hello'}, {msg: 'world'}]
  }
})

说明

以上代码是一个小程序页面的示例代码,使用了 Page() 方法来定义页面组件。在该页面组件中,定义了一个名为 data 的对象,该对象中包含两个属性:

  1. info:表示一个字符串类型的数据,其初始值为 'init data'
  2. msgList:表示一个数组类型的数据,其初始值为 [{msg: 'hello'}, {msg: 'world'}],其中每个元素都是一个包含 msg 属性的对象。

我们可以通过调用 this.data 来访问这些数据。

需要注意的是,在小程序中,视图和数据是分离的。因此,我们可以在代码中通过修改 data 中的数据来更新视图。例如,我们可以通过以下方式来动态修改 info 的值:

this.setData({
  info: 'new data'
})

当我们调用 setData() 方法时,小程序会自动更新视图,使其与当前的数据保持一致。

data 中数据的使用

<view>{{info}}</view>
<image src="{{imgSrc}}" mode="aspectFill"/>
<view>{{randNum1 >= 5 ? "数字大于等于5" : "数字小于5"}}</view>
<view>{{randNum2 * 100}}</view>

运行效果

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值