day02 | 数据绑定

猫的咖啡店_

已于 2023-03-17 16:45:00 修改

阅读量54

点赞数

分类专栏：微信小程序文章标签： javascript Powered by 金山文档

于 2023-03-17 11:46:05 首次发布

本文链接：https://blog.csdn.net/weixin_44953057/article/details/129616635

版权

微信小程序专栏收录该内容

14 篇文章 1 订阅

订阅专栏

文章介绍了如何在微信小程序的index.js中定义页面数据，包括字符串、图片URL以及随机数。然后利用Mustache语法（双大括号）在index.wxml中将这些数据绑定到视图层，展示内容、设置图片属性，并执行简单的条件判断和算术运算。

摘要由CSDN通过智能技术生成

在 data 中定义页面的数据

index.js

// index.js

Page({

    /**
     * 页面初始数据
     */
    data: {
        info: 'hello world',
        imgSrc: 'http://www.itheima.com/images/logo.png',
        randomNum1: Math.random() * 10, // 生成10以内的随机数
        randomNum2: Math.random().toFixed(2) // 生成一个带2位小数的随机数
    }
})

Mustache 语法的格式

把data中的数据绑定到页面中渲染，使用Mustache 语法（双大括号）将变量包起来即可。语法格式为：

Mustache语法的主要应用场景

绑定内容

绑定属性

运算（三元运算、算术运算等）

index.wxml

<!--index.wxml-->
<view>
    {{info}}
</view>
<image src="{{imgSrc}}" mode="widthFix" />
<view>
    {{randomNum1 >= 5 ? '数字大于等于5' : '数字小于5'}}
</view>
<view>
    {{randomNum2 * 100}}
</view>