微信小程式之動態改變內容①文字改變②顯示隱藏
阿新 • • 發佈:2019-01-28
動態改變內容①文字改變②顯示隱藏
①文字改變
先進行資料的簡單繫結
資料繫結使用 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})
},