前端 - 微信小程序微信wx:If/else外层包裹block?

Question

<view>   <block wx:if="{{item.tree.logo}}">     <image src="{{item.tree.logo}}"></image>   </block>   <block wx:else>     <image src="http://temp.im/50x30"></image>   </block> </view>

image标签外层为什么要包裹block，不可以直接写成如下代码吗？

<view>     <image src="{{item.tree.logo}}" wx:if="{{item.tree.logo}}"></image>     <image src="http://temp.im/50x30" wx:else></image> </view>

包裹block是出于什么考虑呀？

Answer 1

也并不是不可以，不过相对来说，个人认为加了 block 后，结构更清晰更直观。

Answer 2

可以啊，为啥不行？我也没看到文档中说不行啊。

WXML 语法参考 / 条件渲染
媒体组件 / image

---

可能原本是一个 wx:if 判断里面有多个元素吧，所以用了 block 包裹，其实就是和 Vue 里面的 template 作用是一样的。后来业务调整之后直接删了也没有删除多余的 block 元素。

Answer 3

在微信小程序中，block 是一个可以包含多个节点的容器，它可以包含 view、text、image 等节点。使用 block 可以使代码结构更加清晰，易于维护。

在您提供的代码中，使用 block 是出于以下几个考虑：

1. 结构清晰：通过使用 block，您可以清晰地看到哪些节点是条件渲染的，哪些不是。这有助于提高代码的可读性和可维护性。
2. 避免不必要的渲染：在您提供的第二种代码中，如果 item.tree.logo 为真，那么两个 image 节点都会被渲染。这可能会导致不必要的性能开销。使用 block 可以确保只有满足条件的节点被渲染。
3. 灵活性：使用 block 可以让您在条件块中包含其他类型的节点，例如 text 或自定义组件等。这为您提供了更大的灵活性来组织您的代码。

总的来说，使用 block 是为了提高代码的可读性和可维护性，并确保更高效的渲染性能。