• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >微信小程序 > 微信小程序 教程之条件渲染

微信小程序 教程之条件渲染

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-11-30

匿名通过本文主要向大家介绍了微信小程序,件渲染等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
wx:if

在MINA中,我们用wx:if="{{condition}}"来判断是否需要渲染该代码块:

<view wx:if="{{condition}}"> True </view>

也可以用wx:elif和wx:else来添加一个else块:

<view wx:if="{{length > 5}}"> 1 </view>  
<view wx:elif="{{length > 2}}"> 2 </view>  
<view wx:else> 3 </view>

block wx:if

因为wx:if 是一个控制属性,需要将它添加到一个标签上。但是如果我们想一次性判断多个组件标签,我们可以使用一个<block/>标签将多个组件包装起来,并在上边使用wx:if控制属性。

<block wx:if="{{true}}">  
 <view> view1 </view>  
 <view> view2 </view>  
</block>

注意: <block/>并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

wx:if vs hidden

因为wx:if之中的模板也可能包含数据绑定,所有当wx:if的条件值切换时,MINA有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。

同时wx:if也是惰性的,如果在初始渲染条件为false,MINA什么也不做,在条件第一次变成真的时候才开始局部渲染。

相比之下,hidden就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。

一般来说,wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用hidden更好,如果在运行时条件不大可能改变则wx:if较好。

以上就是微信小程序 教程之条件渲染的内容,更多相关内容请关注微课江湖()!

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 微信小程序跟读 demo代码
  • 微信小程序-GetWeApp聊天室 代码
  • 微信小程序demo 仿手机淘宝
  • 微信小程序 Artand 瀑布流风格 代码demo
  • 微信小程序高仿手机QQ应用程序
  • 微信小程序-小商城前台
  • 微信小程序仿手机淘宝demo代码
  • 微信小程序仿Apple Music demo代码
  • 微信小程序整合一套UI库
  • 微信小程序妹子图片展示demo代码

相关文章

  • 2018-11-30微信小程序ajax实现请求服务器数据实例
  • 2018-11-30React组件refs该怎么使用
  • 2018-11-30微信开发之js实现tabs选项卡效果
  • 2018-08-20微信小程序表单组件 checkbox
  • 2018-11-30微信小程序如何获取javascript里的数据
  • 2018-11-30微信小程序支付及退款流程的介绍
  • 2018-11-30小程序开发欢迎界面的代码实例
  • 2018-11-30微信小程序使用image组件显示图片的方法
  • 2018-11-30微信小程序中数据缓存的解析
  • 2018-11-30微信小程序中使用ECharts 异步加载数据的方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 基于C#实现简单的随机抽奖小程序实例代码
    • 微信小程序实战程序简易新闻的制作方法
    • 微信小程序 触控事件详细介绍
    • 递归小程序实例代码
    • 微信小程序开发之图片上传+服务端接收教程
    • 微信小程序云开发服务端数据库API 替换更新一条记录
    • 微信小程序开发实战 手把手教你开发跑步微信小程序
    • 微信小程序组件解读和分析:checkbox复选项介绍
    • 微信小程序之新建项目hello WeApp的介绍
    • 有关企业付款的文章推荐6篇

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有