wxml 判断 小程序_小程序01---WXML
WXML的语法
概述
WXML(WeiXin Markup Language)是一种标签语言,可以全面类比html。在小程序内起到了和html一样的作用。结合基础组件,事件系统可以构成页面的结构。
数据绑定
列表渲染
条件渲染
模板
引用
数据绑定
简单绑定
基础用法
双大括号{{}}的语法,对应的数据来自Page()中的data.
{{name}}
Page({
data:{
name:'zhang',
id:0,
bool:false
}
})
给组件的属性做简单绑定的时候,需要在双引号之内写。
控制属性,也要在双引号之内写。
布尔值关键字也要写在双引号之内。分别代表真值和假值。不能使用checked="false"。
运算
可以在{{}}内进行简单的运算。
{{a+b-c}}
{{"hello"+b}}
{{obj.key arr[0]}}
Page({
data:{
a:2,
b:3,
c:1,
obj:{
key:'hello'
},
arr:[1,2]
}
})
分别可以进行三目运算,简单的加减,条件判断,字符串拼接运算,数据的路径运算。
组合
也可以在{{}}内部直接进行组合,构成新的对象或者数组。
{{item}}
Page({
data:{{
zero:0,
a:2,
b:3
}}
})
最终会分别生成数组和对象。
也可以用...扩展运算符对一个对象展开
Page({
data:{
obj1:{
a:1,
b:2
},
obj2:{
c:1,
d:3
}
}
})
但是如果有相同的变量名,后面的变量名会覆盖前面的。
如果{{}}和引号之间用空格,解析的时候也会解析成字符串。
列表渲染
wx:for
渲染列表使用wx:for在属性上绑定一个数组,然后就可以把数组中的每一项渲染出来。
Page({
data:{
arr:[1,2,3,4]
}
})
item是value,index是key。同时,wx:for也可以嵌套。
{{i}}*{{j}} = {{i*j}}
用wx:for-item表示数组当前元素的value
用wx:for-index表示数组当前元素的key
block wx:for
可以把wx:for作用到标签上,来渲染一个包含多个节点的结构块。
{{index}}
{{item}}
wx:key
大概是唯一标识之类的功能。
条件渲染
wx:if
使用wx:if="{{condition}}"来判断是否根据逻辑进行条件渲染。
show
hide
Page({
data:{
condition:true
}
})
block wx:if
和block wx:for一样,这个可以作用在标签之上,用于一个结构块是否展示。
{{hello}}
world
Page({
data:{
bool:true,
hello:hello
}
})
wx:if 和hidden
两者都可以让组件隐藏不显示,但是还是有所不同。
wx:if是惰性的,当它为false的时候并不会执行渲染,当为true的时候才会执行渲染。但是hidden就算是不显示也会执行渲染。
所以说,wx:if有更多的切换效率,较少的初始化渲染效率
hidden正好相反,有更多的初始化效率,更低的切换效率。
模板
WXML提供了模板功能,可以在模板中定义代码片段,在不同地方引用。
hello world
hahaha
用is关键字引用,用name属性声明。
同时,is关键字还支持{{}}的一切语法。比如三目运算来决定具体使用哪一个模板。
模板的作用域
需要指出的是,模板还有自己的作用域,只能使用data传入的数据,以及模板定义文件中定义的模块。
{{arr[0]}}
引用
小程序提供两种引用方式。可以在一个WXML中引入另外一个WXML文件,分别是import和include。
import
可以在文件中使用目标文件中定义的
。
// item.wxml
{{text}}
// newItem.wxml
import也有作用域的概念,只会是目标文件中的,直属import,而不会是目标文件的目标文件。
include
整体拷贝,有点类似velocity中的#include。
body
header
footer
总结
一句话总结就是,这就是vue嘛。。。
wxml 判断 小程序_小程序01---WXML相关推荐
- 微信小程序_小程序开发框架
微信小程序_小程序开发框架 微信小程序框架 微信小程序小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生APP体验的服务. 框架提供了自己的视图层描述语言WXML和WXS ...
- htmlcss实例小项目_小程序websocket心跳库——websocket-heartbeat-miniprogram
前言 在16年的时候因为项目接触到websocket,而后对心跳重连做了一次总结,写了篇博客,而后18年对之前github上的demo代码进行了再次开发和开源,最终封装成库.如下: 博客:https: ...
- python发红包小程序_小程序红包雨
前言 话不多少先上效果,引入很简单,将/components/s-packetrain/index放到你的组件文件夹中 直接引用就可以了. 首先你要先在页面引入组件 index.json 引用组件 { ...
- 用python 记账小程序_小会计记账 小程序 走一波
小会计记账小程序 最近同事接了个活,提供接送客户的服务,为了方便根据每天接送客户数量记一波账,于是就搞了一个记账类的小程序,记录每天的进账情况. 目前正在开发中. 小程序截图 首页 首页主要展示当天需 ...
- 编程小石头点餐小程序_小程序点餐成为餐饮业行业趋势
随着微信小应用程序的不断改进,正朝着适应完全市场发展,并且逐渐实现到这一点.扫码点餐结账一条龙的小程序,这有助于餐饮业成为大趋势. "排队一个小时,吃饭十来分钟."现在,排队等候晚 ...
- python 购物车程序_购物车程序python
广告关闭 腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! 第3点要求: 用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒在循环外层 ...
- c++ 按键暂停继续 程序_加工中心程序代码 M30 M03 M04 M05 M07 M08 M09 S F R IJK
M0 M01 M02 M30 M03 M04 M05 M07 M08 M09 S F R IJK N T M06 代码讲解 代码讲解: M00 程序暂停 M0 只要走程序时,遇到M0程序就会停止不动, ...
- python有哪两种表现形式小练笔_小练笔的各种形式
新课程倡导教师 " 用教材教 " ,而不是简单的 " 教教材 " ,教材作为重要的课程资源,其开 发和利用的重点是研究和处理教材, 必须发挥教师在使用教材时的主 ...
- wxml 判断 小程序_小程序学习笔记之WXML
1.数据绑定:{{}} a. 数据绑定使用 Mustache 语法(双大括号)将变量包起来,在对应的.js文件中写数据, b. 在.js中写一个值是否为boolean型,不要加上双引号 在.js中把对 ...
最新文章
- intellij idea 常见遇到的问题整理
- 经常使用的android弹出对话框
- ACM如何产生各种随机数
- java 十六进制浮点_Java十六进制浮点文字
- spark学习-75-源代码:Endpoint模型介绍(6)-Endpoint的消息的接收(2)
- 通俗的说这是一个一对多的例子,看看人家是怎么做的!
- Soft NMS算法笔记
- 手写汉字识别的发展综述
- 除了PS,这几款设计软件也是我的最爱
- 找到解决办法了,特回来写总结,the import cannot be resolved问题可以通过以下方法解决
- SpringBoot学习感悟
- 芯片后端的APR指什么?
- PC上无法捕捉vlan tag的原因
- Node.js 第一天
- 云计算和大数据时代网络技术揭秘(十三)VXLAN
- case、casex、casez的区别
- 风铃机器码修改器2.2单进程单ID硬件信息用于解除机器码硬件修改大师多开器部分游戏
- java8 JDK1.8 API 中文 翻译版 java帮助文档
- WMS系统在仓库数字化管理中的作用
- 利用Python猜测小狐狸进洞