WXML模板语法——数据绑定、事件绑定、条件渲染、列表渲染

最新推荐文章于 2024-05-24 21:51:31 发布

前端梨白

最新推荐文章于 2024-05-24 21:51:31 发布

阅读量950

点赞数 1

文章标签：微信小程序前端

本文链接：https://blog.csdn.net/m0_61631823/article/details/123584666

版权

本文详细介绍了微信小程序中的WXML模板语法，包括数据绑定的Mustache语法，事件绑定的概念及常见类型，如tap和input事件的使用。此外，还讲解了条件渲染的wx:if、wx:elif、wx:else的运用，以及隐藏元素的hidden属性。最后，探讨了列表渲染的wx:for特性，包括索引和变量名的自定义，以及提高渲染效率的关键——wx:key。

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

一、数据绑定

1.Mustanche语法的格式

应用场景：

①绑定内容：<view>{ {变量}}</view>

②绑定属性：

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

Page({
    
data: {
        imgSrc:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
    },


})

③三元运算

例如：

在WXML文件中这样写
<view>{
  {radomNum >5 ? "随机数大于5" : " 随机数小于五"}}</view>
在.js文件中定义数据
 data: {
        radomNum: Math.random()*10
    },
这样就完成了一个最简单的三元运算了

二、事件绑定

1.概述：事件绑定在微信小程序中的就是指渲染层到逻辑层之间的通讯

2.常用类型

3.使用

先在.WXML文件中定义事件函数：例如：

最低0.47元/天解锁文章

前端梨白

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
WXML模板语法——数据绑定、事件绑定、条件渲染、列表渲染

一、数据绑定1.Mustanche语法的格式应用场景：①绑定内容：<view>{{变量}}</view>②绑定属性：<image src="{{imgSrc}}"></image>Page({ data: { imgSrc:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" },})③三元运算
复制链接

扫一扫