条件

s-if

通过 s-if 指令我们可以实现以下操作:

  • 为元素指定条件:当条件成立时元素可见,当条件不成立时元素不存在;
  • 为 s-if 增加一个额外条件分支块;
  • 为 s-if 增加一个不满足条件的分支块。s-else 指令没有值;

注意: s-if 与 s-for 不可在同一标签下同时使用。

代码示例

  1. <!-- if-demo.swan-->
  2. <view s-if="is4G">4G</view>
  3. <view s-elif="isWifi">Wifi</view>
  4. <view s-else>Other</view>
  1. // if-demo.js
  2. Page({
  3. data: {
  4. is4G: true,
  5. isWifi: false
  6. }
  7. });

s-if 与 s-else 之间加入多余标签会报错

代码示例

  1. <!-- if-demo.swan-->
  2. <view s-if="is4G">4G</view>
  3. <view>other words</view>
  4. <view s-else>Other</view>
  1. // if-demo.js
  2. Page({
  3. data: {
  4. is4G: true,
  5. isWifi: false
  6. }
  7. });

block s-if

解释: block 虚拟组件,在渲染时不会包含自身,只会渲染其内容。可以用来渲染一组组件或者标签。

代码示例

  1. <!-- if-demo.swan-->
  2. <block s-if="flag">
  3. <view> name </view>
  4. <view> age </view>
  5. </block>