微信小程序如何控制元素的显示和隐藏

目录

方式一：display

方式二：wx:if

---

有时在微信小程序元素的显示需要通过特定的条件，比如组件的显示，通常需要在主界面有指定操作。可以通过以下两种方式控制元素的显示和隐藏。

方式一：display

 在wxml或者wxss中设置display样式可以控制元素显示情况，元素默认显示，可设置为block、inline、flex等值，当设置display=none时可以隐藏元素。

.wxml

<view style="width: 100%;height: 100vh;display: flex;align-items: center;">
  <button type="primary">按钮1</button>
  <button type="primary">按钮2</button>
</view>

 

设置按钮1的display=none，可以隐藏按钮1，如下：

<view style="width: 100%;height: 100vh;display: flex;align-items: center;">
  <button type="primary" style="display: