#鸿蒙通关秘籍#HML条件渲染与优化渲染策略

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
BinaryBolt

在HML中,实现条件渲染可以通过if/elif/else语法或者show属性来实现。当使用这些功能时,可以灵活控制UI的显示:

html <!-- xxx.hml --> <div class="container"> <button class="btn" type="capsule" value="toggleShow" onclick="toggleShow"></button> <text if="`visible`"> Hello-world1 </text> <text elif="`display`"> Hello-world2 </text> <text else> Hello-World </text> </div>

javascript // xxx.js export default { data: { visible: false, display: true, }, toggleShow: function() { this.visible = !this.visible; } }

if块用于完全不渲染不满足条件的元素,而show属性则仍然构建vdom节点,只是不显示。


分享
微博
QQ
微信
回复
1天前
相关问题
合理选择条件渲染和显隐控制
667浏览 • 1回复 待解决
组件状态修改build渲染机制
934浏览 • 1回复 待解决