微信小程序中WXML模版语法-数据绑定方法介绍

最新推荐文章于 2024-07-19 20:22:34 发布

杜柠函

最新推荐文章于 2024-07-19 20:22:34 发布

阅读量1.2k

点赞数

分类专栏：小程序开发文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/gudada010/article/details/130931656

版权

3 篇文章

订阅专栏

本文介绍了微信小程序中WXML模板的使用，包括在data中定义页面数据，通过Mustache语法进行内容和属性的动态绑定，以及如何进行三元运算和算术运算来实现条件判断和数值计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1>在data中定义数据

2>在WXML中使用数据

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

page({
	data:{
		info:'init data'
	}
})

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

<view>{{info}}</view>//双括号中放入你想导入的数据

Mustache语法的主要应用场景为：

1>绑定内容

2>绑定属性

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

页面的数据如下：

page({
	data:{
		imgSrc:'www.demo.com'
	}
})

页面的结构如下：

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

页面的数据如下：

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

页面的结构如下：

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

让页面的数据如下：

page({
	data:{
		randomNum:Math.random().toFixed(2) //生成一个带两位小数的随机数，例如 0.34
	}
})

页面的结构如下：

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