【微信小程序】数据绑定

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


数据绑定的基本原则

①在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 模板语法 - 数据绑定(九)
微信小程序数据绑定与事件处理:打造动态交互体验
在上一篇中,我们学习了搭建微信小程序开发环境并创建“Hello World”页面。本文深入探讨数据绑定和事件处理机制,通过具体案例帮助你打造更具交互性的小程序。数据绑定使用双花括号`{{}}`语法,实现页面与逻辑层数据的动态关联;事件处理则通过`bind`或`catch`前缀响应用户操作。最后,通过一个简单的计数器案例,巩固所学知识。掌握这些核心技能,将助你开发更复杂的小程序。
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
272 1
|
小程序 JavaScript
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
本文介绍了微信小程序中的数据绑定、事件绑定、事件传参与数据同步的基本概念和使用方法,包括如何在data对象中定义数据、使用mustache语法在wxml中渲染数据、绑定和处理事件、事件对象属性、事件传参以及实现输入框与data数据的同步。
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
|
小程序 JavaScript 前端开发
微信小程序开发时数据是否是双向数据绑定的
微信小程序开发时数据是否是双向数据绑定的
|
缓存 开发框架 JavaScript
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
支付系统---微信支付23-数据绑定和事件,使用Vue调试要添加扩展,F12与console平级就出现了Vue,在支付资料,微信支付,04资料,工具里
支付系统---微信支付23-数据绑定和事件,使用Vue调试要添加扩展,F12与console平级就出现了Vue,在支付资料,微信支付,04资料,工具里
|
小程序 JavaScript
微信小程序——数据绑定
微信小程序——数据绑定
422 0
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
4906 7
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
5345 1