【微信小程序】数据绑定

简介: 【微信小程序】数据绑定


数据绑定的基本原则

①在data中定义数据

②在WXML中使用数据

在data中定义页面数据

在页面对应的.js文件中,把数据定义到data对象中即可:

Page({
    data:{
        // 字符串类型的数据
        info: 'init data'
        // 数据类型的数据
        msgList:[{msg:'hello'},{msg:'world'}]
    }
})

Mustache语法格式

把data中的数据绑定到页面中渲染,使用Mustache语法将变量包起来即可,语法格式如下:

<view>{{要绑定的数据名称}}</view>

🏆使用实例:

写一个hello world字符串并渲染到页面上

✅list.js

Page({
    data: {
        info:'hello world'
    }
})

✅list.wxml

<view>{{info}}</view>

Mustache语法的应用场景

①绑定内容

②绑定属性

③运算(三元运算、算术运算等)

动态绑定内容

✅页面的数据如下:

Page({
    data: {
        info:'hello world'
    }
})

✅页面的结构如下:

<view>{{info}}</view>

动态绑定属性

✅页面数据如下:

Page({
    data: {
        imgSrc:'https://c-ssl.dtstatic.com/uploads/blog/202110/30/20211030124119_be7bb.thumb.1000_0.png'
    }
})

✅页面结构如下:

<image src="{{imgSrc}}" mode="widthFix"></image>


三元运算

✅页面的数据如下:

Page({
    data: {
        randomNum:Math.random() * 10 // 生成10以内的随机数
    }
})

✅页面的结构如下:

<view>{{randomNum >=5 ? '随机数字大于等于5' :'随机数字小于5'}}</view>

算数运算

✅页面的数据如下:

Page({
    data: {
        randomNum:Math.random().toFixed(2) // 生成0~1之间的两位小数
    }
})

✅页面的结构如下:

<view>生成100以内的随机数:{{randomNum * 100}}</view>

相关文章
|
小程序 JavaScript
【微信小程序】-- WXML 模板语法 - 数据绑定(九)
【微信小程序】-- WXML 模板语法 - 数据绑定(九)
|
5月前
|
小程序
微信小程序数据绑定与事件处理:打造动态交互体验
在上一篇中,我们学习了搭建微信小程序开发环境并创建“Hello World”页面。本文深入探讨数据绑定和事件处理机制,通过具体案例帮助你打造更具交互性的小程序。数据绑定使用双花括号`{{}}`语法,实现页面与逻辑层数据的动态关联;事件处理则通过`bind`或`catch`前缀响应用户操作。最后,通过一个简单的计数器案例,巩固所学知识。掌握这些核心技能,将助你开发更复杂的小程序。
|
9月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
104 1
|
10月前
|
小程序 JavaScript
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
本文介绍了微信小程序中的数据绑定、事件绑定、事件传参与数据同步的基本概念和使用方法,包括如何在data对象中定义数据、使用mustache语法在wxml中渲染数据、绑定和处理事件、事件对象属性、事件传参以及实现输入框与data数据的同步。
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
|
11月前
|
小程序 JavaScript 前端开发
微信小程序开发时数据是否是双向数据绑定的
微信小程序开发时数据是否是双向数据绑定的
|
11月前
|
缓存 开发框架 JavaScript
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
支付系统---微信支付23-数据绑定和事件,使用Vue调试要添加扩展,F12与console平级就出现了Vue,在支付资料,微信支付,04资料,工具里
支付系统---微信支付23-数据绑定和事件,使用Vue调试要添加扩展,F12与console平级就出现了Vue,在支付资料,微信支付,04资料,工具里
|
小程序 JavaScript
微信小程序——数据绑定
微信小程序——数据绑定
220 0
|
2月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
549 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
5月前
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。

热门文章

最新文章