Page.prototype.setData(Object data, Function callback)
callback:(setData引起的界面更新渲染完畢后的回調(diào)函數(shù))
setData?函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層(異步),同時(shí)改變對(duì)應(yīng)的?this.data?的值(同步)
1、設(shè)置數(shù)據(jù)?
可以設(shè)置一個(gè)或同時(shí)多個(gè)data數(shù)據(jù) ?
this.setData({
? ? test:'hello world!',
? ? info:'data',
})
console.log(this.data.test) ? //? 結(jié)果 =》 “hello world!”
console.log(this.data.info) ? //? 結(jié)果 =》“data”
2院水、用setData() 設(shè)置/修改 對(duì)象或數(shù)組 里某個(gè)屬性的值 & 動(dòng)態(tài)設(shè)置值
比如修改 下面?medias 對(duì)象里 id的值
①key必須帶引號(hào)
page({
? ? data:{
? ? ? ? ? ? medias:{id:"666",name:"test"}争占,
? ? ?},
? ? changeData :function(){
? ? ? ? this.setData({
? ? ? ? ? ? "medias.id":"999” ? //key必須帶引號(hào)
????????})
? ? ? ? console.log(this.data.medias.id) ?//? 結(jié)果 =》 “999”
????}})
②先將 key值用變量保存 穴墅,key值使用時(shí) 用[ ]引起來(lái)
page({? ?
????data:{ ?
????????medias:{id:"666",?name:"test"} ? ?
?????},? ??
????changeData :function(){? ? ?
? ? ? ? ? var media=“medias.id” ; ? ? //先將 key值用變量保存
????????? this.setData({? ? ? ?
? ? ? ? ? ? ? ? ?[media]:“999” ? ? ? ? ? //?key值使用時(shí) 用[ ]引起來(lái)
???????????}) ? ?
? ?????????console.log(this.data.medias.id) ??//? 結(jié)果 =》 “999”?
????}
})
3?? 動(dòng)態(tài)index? 修改data
Page({
????data: {
????????dataList: [{
????????????subTitle: "【冰鮮】馬鮫魚(yú)",
????????????details: "500g~600g/條 1000g130元",
????????????count: 2,
????????},
????????{???????????
????????????subTitle: "【冰鮮】秋刀魚(yú)",? ? ?
????????? details: "400g~500g/條 1000g80元",?
? ? ? ? ? ? count: 3,? ? ?
?????}]
?},?
bindReduce(e) {
????????var index = e.target.dataset.index;? ?
????????????? //點(diǎn)擊事件從 wxml 獲取自定義屬性index 用于判斷是修改數(shù)組中第幾個(gè)元素的數(shù)量
????????var count = 'dataList[' + index + '].count'? ??
? ? ? ? ?this.setData({
????????????????[count]: this.data.dataList[index].count -1
? ? ? ? ?})
????}
});
四 不同input 綁定同一個(gè)事件 通過(guò) 傳type 做不同的狀態(tài)更新
<view class="container">
????????<view>
?????????????<label>姓名</label>????????????<input bindinput='changeValue' value="{{name}}" data-type="name"></input>
????????</view>
????<view>
????????<label>手機(jī)號(hào)</label>
? ? ? ? ? <input type="number" bindinput='changeValue' value="{{phone}}" data-type="phone">? ? ? ?</input>
????</view>
</view>
changeValue(e){?
?????????var value = e.detail.value;
?????????var type = e.currentTarget.dataset.type;
?????????this.setData({
?????????????????[type]: value
?????????})
????????console.log('name',this.data.name)
? ? ? ? console.log('phone', this.data.phone)
?}