微信小程序学习笔记(三)
渲染标签
(1)运算=>表达式
(a)可以在花括号中加入表达式----“语句”
(b)表达式指的是一些简单的运算 数字运算 字符串 拼接 逻辑运算数字的加减乘除 字符串的拼接 三元表达式
(c)语句(花括号中不能直接加入)复杂的代码段 if else switch do while … for…
(2)列表渲染列表循环
(a)wx:for="{{数组或者对象}}"
wx:for-item=“循环项的名称”
wx:for-index=“循环项的索引”
(b)wx:key=“唯一的值"用来提高列表渲染的性能wx:key绑定的值
<1>string类型,绑定一个普通的字符串的时候,那么这个字符串名称肯定是循环数组中的对象的唯一属性
<2>wx:key=“this" 就表示数组是一个普通的数组this表示是循环项,这个值不可以随便写,虽然不会显示错误,但是你如果在后面频繁的修改原数组的时候,会出现一些莫名其妙的问题[1,2,3,44,5][“1”,“222”,“zdfzd”]
当出现数组的嵌套循环的时候,尤其要注意,以下绑定的名称不要重名默认情况下,不写wx:for-item=“item” wx:for-index=“index”,小程序也会把循环项的名称和索引的名称叫做item和index,只有一层循环的话,wx:for-item=“item” wx:for-index=“index"可以省略对象循环
(c)wx:for=”{{数组或者对象}}”
wx:for-item=“对象的值”
wx:for-index=“对象的属性”
循环对象的时候最好把index和item的值都修改一下wx:for-item=“value” wx:for-index=“key”
(3)block标签
(a)占位符的标签
(b)写代码的时候,可以看到这个标签的存在(c)页面渲染,小程序会把它移除掉当你要循环某些数据或者要渲染某些数据的时候,如果不想额外的加一层外边的标签,就可用上block标签来做一个占位
(4)条件渲染
(a)wx:if=”{{true/false}}"
if,else,if else对应wx:if ,wx:elif,wx:else
(b)hidden
<1>在标签上直接加入属性hidden,会隐藏内容
<2>hidden="{{true}}"
(c)什么场景下用哪个
<1>当标签不是频繁的切换显示,优先使用wx:if,直接把标签从页面结构给移除掉
<2>当标签频繁切换显示的时候,优先使用hidden,通过添加样式的方式来切换显示(display:none),hidden属性不要和display一起使用,行内优先级别高,会覆盖hidden