在很多的業務場景中會遇到這樣一個需求，就是根據後臺返回的一個狀態值，來控制一個元素是顯示還是隱藏。

比如說，當用戶沒有登入的情況下點選開始遊戲，這時肯定不會讓他玩，而是會彈出一個登入提示框讓他登陸。

類似於這種場景。這種方式主要用三目運算子來實現

直接看程式碼吧 

<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); } }) },

想要獲得更多資料的  請微信搜尋公眾號 【熱血科技】，關注一下即可。