最新公告
  • 如遇下载失效问题,请联系在线客服,客服24小内为您解决!立即加入我们
  • 微信小程序wxml中条件判断wx:if的讲解

    在wxml中可以使用wx:if用来做数据判断,然后输出不一样的结构或者是否渲染显示。

    使用也挺简单的

    <view wx:if="{{condition}}"> 我是真才显示</view>
    

    数据condition赋值为真的时候才会显示view包裹的内容

    Page({  
      data: { 
        condition: true
      }
    })
    

    如果还有其他条件呢:用wx:elif继续判断

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

    如果判断内有多个<view/>,就需要用<block/> 标签包裹起来

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

    官网文档中有在和hidden的比较中,有提到使用wx:if的“时机”。

    wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
    一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变,则 wx:if 较好。
    

    简单讲,就是wx:if为false的时,页面加载后页面结构是没有包裹的那些代码的。hidden就像添加样式的方式来切换显示。如果做个tab切换效果的,就推荐使用hidden而非wx:if。

    注意:wx:if和wx:for必须分开使用,不能再同一个标签上

    免责需知
    1、本站所有资源均来源于网络收集,一切版权©归原作者所有,请保留原版权信息。
    2、本站分享仅供参考学习和演示,禁止商用,如需商用,请从正规渠道选择购买正版!使用正版!支持正版!维护一个良好的知识产权环境。
    3、内容故是参考与学习,不确保能正常演示,也不包含其中的技术服务。
    4、排除在某个功能上存在有其它的BUG或源码残缺的可能,购买后一率不能退款。
    5、资源下载不含技术服务,需付费安装请联系客服100元/次。
    6、文件储存在网盘,如发现链接或者密码有误,请联系客服。
    7、如果付款后下载不了,请提交工单说明,客服会在24小时内解决,如果解决不了,会为您退款。
    8、侵权反馈邮箱:yutongyuncom@qq.com
    顺风猫 » 微信小程序wxml中条件判断wx:if的讲解

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    顺风猫
    一个高级程序员模板开发平台