条件渲染

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

你想根据某个条件来决定是不是要渲染某块界面 .. 可以在界面上绑定一个条件 .. 比如在这个 header 的包装上面 ... 可以用一个 wx:if .. 一组引号 .. 里面绑定一个条件 .. 这个条件如果计算出来是 true ,那这块界面就会被渲染 ..

如果是 false 就不会被渲染 ..

比如绑定一个条件 ... 看一下 header 的 content 值的字符数是不是大于 5 ... . 现在页面上的标题会被隐藏 .. 因为这个条件计算出来的值是 false .. 再看一下这个 content 字符数是不是大于 3 ... 这次标题会显示 .. 因为条件计算出来的值是 true ..

一般我们可以在这里绑定页面上的一个数据 .. 这个数据的值应该是 true 或者 false .. 在 header 里面,添加一个 show .. 先把它设置成 false ..

然后把这个 show 的值绑定到个组件的 wx:if 里面 ...

现在页面上的标题没显示出来 .. 我们再回到开发者工具看一下 .. 在调试这里 .. 打开 wxml 面板 .. 在这里可以检查一下页面上的元素 ..

你会发现 .. 标题的包装组件没有在这里出现 .. 也就是 wx:if 并不是简单的让元素在界面上显示或者隐藏 .. 如果你给的值是 false .. 那这块元素压根就不会在页面上被渲染 ... 真到你给它一个 true ..

把 header 里的 show 设置成 true ... 标题元素现在就会在页面上渲染出来了 ..

这里我们可以继续使用 elseif 去做一些判断 .. 或者用一个 else 设置一下默认的东西 .. 复制一块 ..

在这个 view 组件上面,用一个 wx:else ... 这样它上面的这个 view 不显示的话,就会显示这个 view 组件,还有它里面包装的东西 .. 要显示的文字是 无标题 ..

保存 ... 现在会显示页面的标题 .. 因为 show 的值是 true ..

再把 show 的值设置成 false ..

这样页面上会就会显示一个 无标题 .. 再把 show 的值设置成 true ... 这样又会显示页面的标题 ..

0:00
0:00
2:23
0:00
3:54
0:00
1:46

条件渲染《 微信小程序:视图 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点