小程序this.setData设置动态索引变量 | 熊阿哥博客

小程序this.setData设置动态索引变量

微信   2025-01-27 20:33   123   0  

在微信小程序中,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);

然后在调试器里面检查:

45892_qrfn_9687.png

                        

原文链接: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




博客评论
还没有人评论,赶紧抢个沙发~
发表评论
说明:请文明发言,共建和谐网络,您的个人信息不会被公开显示。