此篇文章是本人對setData方法的一些理解,是查閱文檔和查找一些其他資料綜述的,有所不足希望指正!
直接進入正題!
一、setData()方法:
1、參數接受一個對象,以key,value的形式表示;
2、參數和變量名稱一致,可用一個值代替(es6新語法特性)
如上圖所示,在this.data中設置ceshi這條數據,在方法中,我們定義ceshi變量讓其等於that.data.ceshi; 然后對ceshi進行操作,其實就是對that.data.ceshi進行操作,而that.setData({ceshi})就等同於that.setData({ceshi : ceshi }) ; 第一個ceshi 是that.data.ceshi, 第二個ceshi 是我們定義的變量ceshi。通過打印的結果可以看到,數據已經添加上了。
3、可以設置一個或多個data數據
- this.setData({
- list:'change data',
- info:'change data'
- })
4、key可以以數據路徑的形式給出(路徑形式的key必須帶引號)
- this.setData({
- 'list[0].title' = 'change data', //數據路徑key必須帶''號
- 'list[0].num' = 'change data' //數據路徑key必須帶''號
- })
5、key值可以為變量,為變量的時候要用[ ]引起來
- page({
- data:{
- todos:[{id:0,text:'abc',isDelete:false}]
- },
- change(e){
- var index = e.currentTarget.dataset.id;
- var deletedtodo='todos['+index+'].idDelete';
- this.setData({
- [deletedtodo]:true
- })
- }
- })
如圖所示 deletedtodo為變量作為key值的時候要用[ ] 包裹起來。
6、直接修改this.data,雖然會改變數據,但是頁面不會重新渲染,無法改變頁面狀態,會造成數據不一致的情況
7、單次設置的數據不能超過1024KB,請盡量避免一次設置過多的數據
8、不需要在this.data中預先定義,使用setData()方法會自動創建該數據
- this.setData({
- name:'張三' //name在this.data中未定義,但不會報錯
- })
name在this.data中未定義,但是這種寫法不會報錯,而且還會在this.data.zhong創建name這條數據。可以用this.data.name獲取到該條數據
二、對數組的操作,json操作和數組一樣。
1、數組的增加:
我們可以自己組裝一個對象如上圖的obj,然后用push()方法將其添加到數據的最后。注意push的數據的index是+1的,也就是說原本數組中index依次為0,1,2,新增加的就是3,依次類推。如果想將數據插入到數據某個位置,那么可以合理運用concat()的方法將數據合並到數據中。
也可以用splice()方法添加,第一個參數是插入的位置,第二個參數設為0,則為添加,若為大於0的的數字則為要刪除的個數,第三個參數只有在第二個參數為0是使用,是添加的內容。這種方法非常靈活,只需要改變第一個參數就可以將內容添加到數據的任何一個地方。下面附上splice的用法;
Splice
- splice()方法向/從數組中添加/刪除元素,然后返回被刪除的元素組成的數組。
- 用於數組對象。
- arr.splice(index, howmany, item1,…, itemX)
參數 | 描述 |
---|---|
index | 必需。整數,規定了添加/刪除元素的位置,使用負數可從數組結尾處規定位置。 |
howmany | 必需。要刪除的元素的數量。如果設置為0,則不會刪除元素。如果添加元素則這里應該設置為0. |
itemX | 可選。向數組添加的新項目。在添加的時候用。 |
- 注意:這個方法會對原數組做出修改。獲得的也是新數組。
2、數組的刪除:
刪除也是用splice()方法實現的,ceshi.splice(1,1)就是從index為1的位置開始,刪除1個元素。splice()用法參上。
3、數組的修改:
將key值以數據路徑的形式賦值,可以達到修改數據中的某一條,此處,我們只將ceshi[0].value的值改變為'oooo',其他數據未發生變化。
也可以用這種方法修改數組的參數,對這種方法有疑問的可以參考setData()第二條。