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

本文详细介绍了微信小程序中的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文件中定义事件函数:例如:


                
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端梨白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值