微信小程序列表渲染和条件渲染

首先是if条件判断,如下代码段:先给出条件判断表达式,接上问号,第一个值是为true的结果,冒号后面是为false的结果

<view>{{10%2==0?"偶数":"奇数"}}</view>     <!--if条件判断-->

再在js当中定义了一个list列表。在定义列表如下代码所示:给出一个简单的列表。

 list:[
      {
      id:0,
      name:"月月鸟"
    },
    {
      id:1,
      name:"月月大鸟"
    }
    ]

怎么获取列表的值呢,这个使用就要使用wx:for了,先wx:for给出要循环的对象,这里也就是list列表,wx:for-index和wx:for-item的值就好比于for循环当中的i和j。最后的wx:key只是对循环做一个优化,节省时间,给出的值必须是在列表当中是唯一的值,好比主键

<view wx:for="{{list}}" wx:for-index="index" wx:for-item="item" wx:key="id">
<!--列表循环,索引和值,以及优化索引(给出唯一列)-->
索引:{{index}}----{{item.name}}--{{item.id}}
</view>

需要注意的是,这里的{{index}}获取的值是索引值,从0开始。
当然在前面定义的person对象也可以使用wx:for进行取值:地址链接

<!--如果只有一层循环,可以省略wx:for-index 和 wx:for-item-->
<view wx:for="{{person}}" wx:key="name">
属性:{{index}}--值:{{item}}
</view>

再就是wx:if,表示的意思就是是否移除该标签:运行后,在控制台当中,与console同级的Wxml当中耒阳看到在等于false的值的标签是看不到了的。

<view wx:if="{{true}}">显示</view>
<view wx:if="{{false}}">隐藏</view>

使用hidden属性,只是将其隐藏。

<view hidden="{{true}}">hiddden</view>
发布了285 篇原创文章 · 获赞 39 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/qq_44973159/article/details/104721682