小程序 模版与配置

WXML模版语法

一、数据绑定

1、数据绑定的基本原则

(1)在data中定义数据

(2)在WXML中使用数据

2、在data中定义页面的数据
3、Mustache语法的格式(双大括号)
4、Mustache语法的应用场景

(1)绑定内容

(2)绑定属性

(3)运算(三元运算、算术运算等)

5、动态绑定内容
6、动态绑定属性

7、三元运算

8、算术运算

二、WXML模版语法-事件绑定

1、小程序中常用的事件
2、事件对象的属性列表
3、target和currentTarget的区别
4、bindtap 的语法格式 (相当于鼠标点击事件)
5、在时间处理函数为data中的数据赋值

通过调用this.setData(dataObject)方法,可以给页面data中的数据重新赋值

6、事件传参

小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数

7、事件传参(正确)

可以为组件提供data-*自定义属性传参,其中*代表的是传参的名字

info会被解析为参数的名

数值2会被解析为参数的值

7、事件传参

在事件处理函数中,通过event.target.dataset.参数名,即可获取到具体参数的值

8、bindinput的语法格式
9、实现文本框和data之间的数据同步

实现步骤:

(1)渲染数据

(2)渲染结构

(3)美化样式

(4)绑定input事件处理函数

三、条件渲染

1、wx:if

2、结合<block>使用wx:if

如果要一次性控制多个组件的展示和隐藏,可以使用一个<block></block>标签将多个组件包装并在<block>标签上使用wx:if控制属性

注意:<block>并不是一个组件,只是一个包裹性质的容器,不会在页面中做任何渲染

3、hidden

直接使用也能控制元素的显示与隐藏

4、wx:if与hidden的对比

(1)运行方式不同

wx:if以动态创建和移除元素的方式,控制元素的展示与隐藏

hidden以切换样式的方式(display:none/block),控制元素的显示与隐藏

相关推荐
云迈科技-软件定制开发15 小时前
2026年湖南长沙软件定制开发公司怎么选?本地企业做APP、小程序、管理系统的合作参考
小程序
小码哥0682 天前
从三甲综合医院到连锁诊所:医院管理小程序的场景化突围逻辑(陪诊系统-陪诊APP-陪诊小程序)
小程序·医院管理系统·陪诊小程序·陪诊系统·陪诊app
2501_916007472 天前
iOS和macOS应用程序性能分析和优化工具使用综合指南
android·macos·ios·小程序·uni-app·iphone·webview
正在走向自律2 天前
用豆包Seed Evolving打造全功能【AI智能记账】小程序,开源可落地
人工智能·小程序·开源·智能记账
小羊Yveesss3 天前
模板建站哪个平台好?模板数量之外还要比较编辑与SEO能力
大数据·人工智能·小程序
2501_916007473 天前
深入理解HTTPS对称与非对称加密机制及Charles抓包实践
网络协议·http·ios·小程序·https·uni-app·iphone
郑州光合科技余经理3 天前
家政O2O平台解析:从0搭建上门预约小程序解决方案
android·java·开发语言·前端·小程序·架构·php
维双云3 天前
小程序商城制作一个需要多少钱?2026报价明细与成本拆解
小程序
郑州光合科技余经理3 天前
家政预约小程序后端源码深度剖析:支付回调实战
java·开发语言·前端·git·小程序·架构·php
电商API_180079052473 天前
导购比价小程序场景|京东联盟商品详情对接方案|多规格图文拉取技术实操
网络·小程序·网络爬虫