小程序-wxml-语法-38-setData-修改数组类型数据

2025-03-08 约 522 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=146120921

小程序 wxml 语法 —— 38 setData() - 修改数组类型数据

这一节演示如何新增、修改和删除数组类型数据，直接打开微信开发者工具进行演示；

新增数组类型数据

在 pages/cate/cate.wxml 中添加页面样式代码，如下：

<view wx:for="{{ list }}" wx:key="index">{{ item }}</view>
<button type="primary" bind:tap="updateList">修改数组类型数据</button>

在 pages/cate/cate.js 中添加数据声明和新增数组类型数据的代码，如下：

Page({
  // 在小程序页面中所需要使用的数据均来自 data 对象
  data: {
    list: [1, 2, 3]
  },

  // 更新 list
  updateList(){
    // 新增数组元素
    // 使用 push 可以新增数据，但是在页面上不会显示
    // this.data.list.push(4)

    // 方法一
    this.data.list.push(4);
    this.setData({
      list: this.data.list
    });

    // 方法二
    const newList = this.data.list.concat(4);
    this.setData({
      list: newList
    });

    // 方法三
    const newList = [...this.data.list, 4];
    this.setData({
      list: newList
    });
  }
})

刷新页面，点击按钮，可以发现数组新增了一个数值，如下所示：

修改数组类型数据

在 pages/cate/cate.js 中添加修改数组类型数据的方法，如下：

Page({
  // 在小程序页面中所需要使用的数据均来自 data 对象
  data: {
    list: [1, 2, 3]
  },

  // 修改 list
  updateList(){
    this.setData({
      'list[1]': 6
    })
  }
})

刷新页面，点击按钮，可以发现数组数据被修改了，如下所示：

删除数组类型数据

在 pages/cate/cate.js 中删除数组类型数据的方法，如下：

Page({
  // 在小程序页面中所需要使用的数据均来自 data 对象
  data: {
    list: [1, 2, 3]
  },

  // 删除 list
  updateList(){
    // 方法一
    this.data.list.splice(1, 1)
    this.setData({
      list: this.data.list
    })

    // 方法二
    const newList = this.data.list.filter(item => item !== 2)
    this.setData({
      list: newList
    })
  }
})

刷新页面，点击按钮，可以发现数组数据被删除了，如下所示：

参考视频：