1. 程式人生 > >微信小程式之動態改變內容①文字改變②顯示隱藏

微信小程式之動態改變內容①文字改變②顯示隱藏

動態改變內容①文字改變②顯示隱藏
①文字改變
先進行資料的簡單繫結
資料繫結使用 Mustache 語法(雙大括號)將變數包起來

<button bindtap='btnClick' > {{btnText}}</button>

在本頁面對應js中

Page({
  data: {
btnText:"按鈕內容" 
 }
}),

btnClick:function(){
  this.setData({ btnText: '這裡是新內容'})
}

②顯示隱藏
條件渲染
wx:if
在框架中,使用 wx:if=”{{condition}}” 來判斷是否需要渲染該程式碼塊(程式碼內容是否顯示)
wx:else 一看就懂

<button bindtap='btnClick' >顯示隱藏</button>
<view wx:if="{{testtrue}}">123</view>
<view wx:else>2333333333</view>

在本頁面js中

Page({
  data: {
testtrue:true 
 }
}),
btnClick:function(){
  var isShow = this.data.testtrue;

  this.setData({testtrue:!isShow})
},