1. 程式人生 > >【小程式】讓控制元件隱藏或者顯示

【小程式】讓控制元件隱藏或者顯示

最開始寫的時候運用新增class的方法,舉例:

test.wxml:

 <view class=" {{showOrHidden?'show':'hide'}}">+++++++++++++</view>

test.wxss:

.hide {
  display: none;
}

.show {
  display: block;
}

test.js:

 data: {
    showOrHidden:true,//判斷顯示與否的,true表示顯示,反之隱藏
  },

看到一種簡潔的方式,利用wx:if的方式,舉例:

test.wxml:

<view wx:if='{{showOrHidden}}'>++++++++++++++++++++++++++++</view>

test.js:

 data: {
    showOrHidden:true,//判斷顯示與否的,true表示顯示,反之隱藏
  },
可以看到方法二比方法一簡單一些,如果showOrHidden設定為false,則整個元素也不會被建立,而方法一是如論如何都會被建立的。