微信小程序 控制一个元素的显示或隐藏

在很多的业务场景中会遇到这样一个需求，就是根据后台返回的一个状态值，来控制一个元素是显示还是隐藏。

比如说，当用户没有登录的情况下点击开始游戏，这时肯定不会让他玩，而是会弹出一个登录提示框让他登陆。

类似于这种场景。这种方式主要用三目运算符来实现

直接看代码吧 

<view class='page'>
    <!--  提醒用户登录  -->
    <view class="login {{isLogin?'loginShow':'loginHide'}}">
        <view class='loginHint'>
            <text>友情提示</text>
            <text>为了您能更好的体验这个趣味小程序</text>
            <text>请您先进行登录，以免影响您的游戏体验</text>
            <view class='loginBtn'>
                <button catchtap='hideLogin'>稍后登录</button>
                <button open-type='getUserInfo' bindgetuserinfo='getUserInfo'>立即登录</button>
            </view>
        </view>
    </view>
    <!--  end  -->
</view>
<button class='startAnswer' style='background:red;' bindtap='startAnswer'>开始挑战</button>

page{
    height: 100%;
}
button{
    z-index: 1;
}
.page{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: relative;
}
/*  提醒用户登录  */
.login{
    height: 100%;
    width: 100%;
    position: fixed;
    background-color:rgba(0, 0, 0, .5);
    z-index: 10;
    top: 0;
    left: 0;

}    
.loginShow{
    display: flex;
}
.loginHide{
    display: none;
}
.loginHint{
    height: 40%;
    width: 90%;
    background: #fff;
    border-radius: 20rpx;
    margin: 30% auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-size: 30rpx;
}
.loginBtn{
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.loginBtn button{
    background: #ffab24;
    border-radius: 40rpx;
    height: 80rpx;
    width: 45%;
    color: #fff;
}
/*  :end  */

.startAnswer{
    width: 80%;
    color: #fff;
    position: absolute;
    margin-top: 40%;
    left: 50%;
   

    //开始答题按钮
    startAnswer:function(){
        var _this = this;
        var session3rd= wx.getStorageSync('session3rd');
        app.util.request({
            'url': 'entry/wxapp/getUserInfo',
            data: {

            session3rd:session3rd

          },

method: "POST", header: { 'content-type': 'application/x-www-form-urlencoded' }, success: function (res) { console.log(res); if (res.data.data.userinfo == "") {//userinfo为空时，说明用户没有登录，这个是后台和前端商量的 _this.setData({ isLogin:true//isLogin为true时，登录提示框会显示 }) } else { wx.navigateTo({ url: '../answer/answer', }) } }, fail: function (res) { console.log(res); } }) },

想要获得更多资料的  请微信搜索公众号 【热血科技】，关注一下即可。