027-87227388

微信小程序 - 判断

发布时间:2021-03-23 浏览:1073

需求:

判断最终显示,如果是空,就不显示,如果不是空就显示。
代码:
实现1:三目运算

三目:a==b?true:false;

代码:如果有name了,就显示class标签show,如果name为空,就显示class标签hide

<text class="name {{comment.name?'show':'hide'}}">{{comment.name}}</text>

实现2:wx:if - wx:else

wx:if判断对象或者字符串是否为空

    <block wx:if="{{对象1.对象2.url.length}}" class="flex-wrp-row">
              <image class="content-image" src="{{c对象1.对象2..url}}" mode="aspectFill"></image>
    </block>
    
    <block wx:else>
    </block
    

实现3:wx:if - wx:else 的length大小

wx:if判断对象或者字符串的长度大小

    <block wx:if="{{对象1.对象2.url.length > 0}}" class="flex-wrp-row">
              <image class="content-image" src="{{c对象1.对象2..url}}" mode="aspectFill"></image>
    </block>
    
    <block wx:else>
    </block
    

注解:

1、这里使用到了block,<block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。官方解释

2、判断使用.length > 0,因为不论图片还是文字最终显示的是字符串和资质,只用判断这个大小即可。

3、试错:我本来使用判断

    对象2 != ''  -->  false
    对象2.url != ''  -->  false

对象2以及对象2中的url都是有数值的,按理应该提示true,结果提示false,表明 != 不准确。