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

这篇具有很好参考价值的文章主要介绍了微信小程序开发---条件渲染和列表渲染。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、条件渲染

（1）基本使用

（2）block

（3）hidden

二、列表渲染

（1）基本使用

（2）手动指定索引和当前项的变量名

（3）wx:key的使用

一、条件渲染

（1）基本使用

条件渲染就相当于if语句，这也不需要多说了，终点是它的用法。
<view wx:if="{{count===1}}">1</view>
<view wx:elif="{{count===2}}">2</view>
<view wx:else>3</view>

（2）block

如果想要一次性控制多个组件的展示和隐藏，可以使用block标签将多个组件包装起来。
<block wx:if="true">
  <view>1</view>
  <view>2</view>
</block>
注意block并不是一个组件其实，只是一个包裹性的容器，不会在页面中做任何渲染

（3）hidden

在小程序中，直接使用hidden="true"可以控制元素的显示和隐藏
<view hidden="{{msg}}">11s1</view>

wx:if和hidden的区别

（1）运行方式不同。

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

hidden以切换样式的方式控制（display:none/block）

（2）使用建议

频繁切换建议使用hidden

控制条件复杂时使用if

二、列表渲染

（1）基本使用

<view wx:for="{{array}}">
 索引={{index}}
 值={{item}}
</view>
注意index和item是写死的，改成别的则无法显示

（2）手动指定索引和当前项的变量名

<view wx:for="{{array}}" wx:for-index="id" wx:for-item="val">
  {{id}}----{{val}}
</view>

（3）wx:key的使用

类似于vue列表渲染的：key，小程序渲染在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key文章来源地址https://www.toymoban.com/news/detail-699214.html
arr:[
      {id:11,name:'大明'},
      {id:22,name:'二明'},
      {id:33,name:'三明'}
    ]

<view wx:for="{{arr}}" wx:key="id">{{item.name}}</view>

到了这里，关于微信小程序开发---条件渲染和列表渲染的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！