在微信小程序中,this.setData 方法用于将数据从逻辑层发送到视图层,同时改变对应的 data 对象中的值。你可以通过 this.setData 设置动态的数据,但是需要遵循特定的语法规则。
如果你想要设置动态的 data,可以这样做:
Page({ data: { dynamicKey: 'value1', shuzu: ['shanghai','beijing'], suoyin: 1 }, // ... // 在某个方法中,你可以这样设置动态的data someMethod: function() { let key = 'dynamicKey'; // 动态的key let value = 'newValue'; // 新的值 // 使用方括号语法来设置动态的key this.setData({ [key]: value, ['shuzu[suoyin]']: 'hongqing' }); } // ... });
在上面的例子中,key 是一个变量,它存储了要更新的 data 中的键名。通过使用方括号 [],你可以将变量作为对象的键,从而实现动态设置 data。
请注意,this.setData 方法接受一个对象,该对象的键是要更新的 data 字段的名称,值是要更新的内容。如果你尝试直接使用一个变量作为键,而不使用方括号,它将被视为字符串字面量,而不是变量名。
示例:
现在data定义:
testText : '', testTextArray : ['A','B','C','D','E'], testTextArrayOfObject : [ { title : 'title_1', content : '舞台上的刘德华~刘德华~', }, { title : 'title_2', content : '你是我的观音菩萨,我是你的刘德华', }, { title : 'title_3', content : '再看一眼就会爆炸哦~', }, { title : 'title_4', content : '衣服包包给你换新的', }, ],
在onLoad操作:
字段赋值;
//字段赋值 this.setData({ testText : 'abc' }) console.log("赋值过后的testText : ", this.data.testText);
数组静态赋值;
//数组静态赋值1 this.setData({ 'testTextArray[0]' : 'Xxx' }) console.log("数组静态赋值过后的testTextArray1 : ", this.data.testTextArray); //数组静态赋值2 this.setData({ ['testTextArray[1]'] : 'XXXX' }) console.log("数组静态赋值过后的testTextArray2 : ", this.data.testTextArray);
数组动态赋值;
//数组动态赋值1: for(var i = 0 ; i < this.data.testTextArray.length ; i ++){ this.setData({ ['testTextArray[' + i + ']'] : 'X' }) } console.log("数组动态赋值1过后的testTextArray : ", this.data.testTextArray); //数组动态赋值2: for(var i = 0 ; i < this.data.testTextArray.length ; i ++){ let content = 'testTextArray[' + i + ']'; this.setData({ [content] : 'Y' }) } console.log("数组动态赋值2过后的testTextArray : ", this.data.testTextArray);
然后在调试器里面检查:
5. 组对象进行操作
① 末位加数据;
//数组对象进行操作 -- 末位加数据 let testArray = {title : '敬请期待!',content : '新神诞生~'}; this.setData({ testTextArrayOfObject : this.data.testTextArrayOfObject.concat(testArray) }) console.log("数组对象进行操作 -- 末位加数据 过后的testTextArray : ", this.data.testTextArrayOfObject);
② 中间或者开头加数据;
//数组对象进行操作 -- 开头加数据 let testArray_1 = [{title : '敬请期待!',content : '新神诞生~'}]; this.setData({ testTextArrayOfObject : testArray_1.concat(this.data.testTextArrayOfObject) }) console.log("数组对象进行操作 -- 末位加数据 过后的testTextArray : ", this.data.testTextArrayOfObject);
③ 删除数据;
//数组对象进行操作 -- 删除数据 let index = 0; this.data.testTextArrayOfObject.splice(index , 1);//第一个是要删除数据的索引,第二个是需要删除数据的数量 console.log("数组对象进行操作 -- 删除数据 过后的testTextArray : ", this.data.testTextArrayOfObject);
然后在调试器里面检查:
原文链接:https://blog.csdn.net/weixin_57788079/article/details/130216937
原文链接:https://blog.csdn.net/weixin_57788079/article/details/130216937
参考:https://blog.csdn.net/Jiaberrr/article/details/142059743