<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p></p>
讯享网
讯享网
列表渲染 就是指通过循环遍历一个数组或对象,将其中的每个元素渲染到页面上
在组件上使用wx:for属性绑定一个数组或对象,即可使每一项数据重复渲染到当前组件
每一项的变量名默认为Item,下标变量名默认为index
在使用wx:for 进行遍历时,建议加上wx:key属性,wx:key的值以两种形式提供:
1.字符串:代表需要遍历的arrray中item的每个属性,该属性的值需要是列表中的唯一字符串或数字,且不能动态改变;
2.保留关键字*this代表for循环的item本身,当item本身是一个唯一的字符串或数字时可以使用。
注意事项:
(1)如果不加wx:key,会报一个warning,如果明确知道该列表是静态,即以后数据不会改变,或者不关注其顺序,可以选择忽略;
(2)在给wx:key调价属性的时候,不需要使用双大括号语法,直接使用遍历的array中item的某个属性;
1.如果需要对默认的变量名和下标进行修改,可以使用wx:for-item和wx:for-index
- 使用wx:for-item 可以指定数组当前元素的变量名
- 使用wx:for-index 可以指定数组当前下标的变量名
讯享网
2.将wx:for用在标签上,以渲染一个包含多个节点的结构快;
- 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何的渲染,只接收控制属性。
- 标签在wxxml中可以用于组织代码结构,支持列表渲染、条件渲染等。
条件渲染主要是用来控制页面结构的展示和隐藏,在微信小程序中实现条件渲染的有两种方式:
1.使用wx:if、wx:eif、wx:else属性组;
2.使用hidden属性;
wx:if 和 hidden 二者的区别:
1.wx:if 当条件为true时将结构展示出来,否则结果不会进行展示,通过移除/新增节点的方式来实现;
2.hidden :当条件为true时会结构隐藏,否则结构会展示出来,通过display样式属性来实现;
讯享网
JS
Page({
data:{
num:1,
isFlag:false
},
updateNum(){
this.setData({
num:this.data.num+1
})
},
updateisFlag(){
this.setData({
isFlag:false
})
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/158375.html