【微信小程序】数据绑定

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


数据绑定的基本原则

①在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>

相关文章
|
6月前
|
小程序 JavaScript
【微信小程序】-- WXML 模板语法 - 数据绑定(九)
【微信小程序】-- WXML 模板语法 - 数据绑定(九)
|
1月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
40 1
|
2月前
|
小程序 JavaScript
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
本文介绍了微信小程序中的数据绑定、事件绑定、事件传参与数据同步的基本概念和使用方法,包括如何在data对象中定义数据、使用mustache语法在wxml中渲染数据、绑定和处理事件、事件对象属性、事件传参以及实现输入框与data数据的同步。
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
|
3月前
|
小程序 JavaScript 前端开发
微信小程序开发时数据是否是双向数据绑定的
微信小程序开发时数据是否是双向数据绑定的
|
3月前
|
缓存 开发框架 JavaScript
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
|
4月前
|
JavaScript
支付系统---微信支付23-数据绑定和事件,使用Vue调试要添加扩展,F12与console平级就出现了Vue,在支付资料,微信支付,04资料,工具里
支付系统---微信支付23-数据绑定和事件,使用Vue调试要添加扩展,F12与console平级就出现了Vue,在支付资料,微信支付,04资料,工具里
|
6月前
|
JavaScript 小程序
微信小程序的双向数据绑定和vue的哪里不一样?下拉刷新的方式代码示例
微信小程序的双向数据绑定和vue的哪里不一样?下拉刷新的方式代码示例
|
6月前
|
小程序 JavaScript
微信小程序——数据绑定
微信小程序——数据绑定
109 0
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
477 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
529 1