136 - 修炼 - 小程序的知识点07

用户1335799

发布于 2021-02-03 12:04:11

24000

代码可运行

文章被收录于专栏：怀英的自我修炼怀英的自我修炼

运行总次数：0

代码可运行

你好呀，上次和你聊了列表渲染，今天和你来聊聊条件渲染。

列表渲染，简单来说就是会方便地把JS中的列表数据展示在页面上。同理呀，既然列表渲染能渲染一个列表，那也就是说前端应该存在着一种能力，能做一些基本的判断。如果这个假设成立的话，那么至少 IF/ELSE 判断，前端也是能做的。

实际情况是，前端确实有能力可以对 JS 中的数据进行 if/else 判断，这就是条件渲染。我感觉这在实际开发中用到的不会很多，属于一种语法糖。因为在实际的开发中，数据是前后端分离的，也就是说数据后端已经处理好了，前端主要负责接收和显示，用到的场景不是很强。

话说回来，不管实用性强不强，那该如何使用呢？

可以参考如下的代码：

<!-- index.html -->
<view>师父被妖怪抓走了，谁去救？</view>
<view wx:if="{{condition===1}}">
孙悟空
</view>
<view wx:if="{{condition===2}}"> 
猪八戒
</view>
<view wx:if="{{condition===3}}"> 
沙悟净
</view>
<view wx:else> 
白龙马
</view>

--------- 分割线 ---------

<!-- index.js -->
Page({
  data:{
      condition:Math.floor(Math.random()*4+1)
  }
})

这里是怀英的小茶馆，有空来坐坐。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-01-28，如有侵权请联系 cloudcommunity@tencent.com 删除

渲染