小程序原生-利用setData()对不同类型的数据进行增删改

1. 声明和绑定数据

wxml文件

html 复制代码
<view> {{school}} </view>
<view>{{obj.name}}</view>
<view id="{{id}}" > 绑定属性值 </view>
<checkbox checked="{{isChecked}}"/>
<!--算数运算-->
<view>{{ id + 1 }}</view>
<!--三元运算-->
<view>{{id===1 ? "等于":"不等于"}}</view>
<!--逻辑判断-->
<view>{{id===1}}</view>
<!--注意:在{{}}语法中,只能写表达式,不能写语句和调用JS方法-->

JS文件

javascript 复制代码
Page({
  data: {
    school: "西安交通大学",
    obj: {
      name: "wwww"
    },
    id: 12,
    isChecked: true
  },
})

2. setData()修改数据

在小程序中修改数据不推荐使用赋值的方式进行修改,因为无法改变页面的数据。正确的方式应该是通过调用setData()方法来进行修改。

3. setData()修改对象类型的数据

3.1 属性新增

html 复制代码
<view> {{userinfo.id}} </view>
<view> {{userinfo.name}} </view>
<button bind:tap="updateUserInfo">修改数据</button>
javascript 复制代码
// pages/test/test.js
Page({
  data: {
    userinfo:{
    }
  },

  updateUserInfo(){
    console.log(this.data.userinfo);
    //新增单个/多个属性
    this.setData({
      'userinfo.name':'tom',
      'userinfo.id':1,
    })
  }
})

3.2 属性值的修改

javascript 复制代码
// pages/test/test.js
Page({
  data: {
    userinfo:{
      name:'',
      id:''
    }
  },

  updateUserInfo(){
    this.setData({
      'userinfo.name':'tom',
      'userinfo.id':1,
    })
  }
})

3.3 实现多属性操作

采用ES6展开运算符方式处理
javascript 复制代码
// pages/test/test.js
Page({
  data: {
    userinfo:{
      name:'',
      id:''
    }
  },
  updateUserInfo(){
    //复制this.data.userinfo的值到userinfo
    //后面加的字段会自动覆盖前面对象里面的属性值
    const userinfo ={
      ... this.data.userinfo,
      name:"jerry",
      id:18
    }
    this.setData({
      //将上面的userinfothis.data.userinfo
      //赋值到键和值如果一样的话,可以简写如下
      userinfo
    })
  }
})
采用Object.assign()方式处理

Object.assign()将多个对象合并成一个对象,从后往前合并,以后面的为准。

javascript 复制代码
// pages/test/test.js
Page({
  data: {
    userinfo:{
      name:'',
      id:''
    }
  },
  updateUserInfo(){
    const userinfo = Object.assign(this.data.userinfo,{name:'jerry'},{id:18})
    this.setData({
      //将上面的userinfothis.data.userinfo
      //赋值到键和值如果一样的话,可以简写如下
      userinfo
    })
  }
})

3.4 删除单个属性

javascript 复制代码
// pages/test/test.js
Page({
  data: {
    userinfo: {
      name: 'tom',
      id: '1'
    }
  },
  updateUserInfo() {
    delete this.data.userinfo.id
    this.setData({
      userinfo: this.data.userinfo
    })
  }
})

3.5 删除多个属性

javascript 复制代码
// pages/test/test.js
Page({
  data: {
    userinfo: {
      name: 'tom',
      id: '1'
    }
  },
  updateUserInfo() {
    //删除多个属性  rest 剩余参数
    //将userinfo解构到name,id,rest中,也就是rest里面没有name,id,再将其赋给userinfo,自然没有name,id
    const {name,id,...rest} = this.data.userinfo
    this.setData({
      userinfo: rest
    })
  }
})

4. setData()修改数组数据

4.1 新增数组元素

html 复制代码
<view wx:for="{{list}}" wx:key="index" > {{item}} </view>

<button bind:tap="updateList">修改数据</button>
javascript 复制代码
// pages/test/test.js
Page({
  data: {
    list:[1,2,3,4,5]
  },
  updateList() {
    //新增数组元素,不能直接使用push方法,因为不能更新页面数据,必须要结合setData方法
    this.data.list.push(10)
    this.setData({
      list: this.data.list
    })
  }
})
javascript 复制代码
// pages/test/test.js
Page({
  data: {
    list:[1,2,3,4,5]
  },
  updateList() {
    //方式1:新增数组元素,不能直接使用push方法,因为不能更新页面数据,必须要结合setData方法
    // this.data.list.push(10)
    //方式2: 利用concat方法
    const newlist = this.data.list.concat(10);
    this.setData({
      list: newlist
    })
  }
})
javascript 复制代码
// pages/test/test.js
Page({
  data: {
    list:[1,2,3,4,5]
  },
  updateList() {
    //方式1:新增数组元素,不能直接使用push方法,因为不能更新页面数据,必须要结合setData方法
    // this.data.list.push(10)
    //方式2: 利用concat方法
    // const newlist = this.data.list.concat(10);
    //方式3:利用ES6的展开运算符
    const newlist = [...this.data.list,10]
    this.setData({
      list: newlist
    })
  }
})

4.2 修改数组元素

html 复制代码
<view> {{list[0].name}} </view>

<button bind:tap="updateList">修改数据</button>
javascript 复制代码
// pages/test/test.js
Page({
  data: {
    list:[{'name':'tom','age':17}]
  },
  updateList() {
    this.setData({
      'list[0].name': 'wuk'
    })
  }
})

4.3 数组元素删除

html 复制代码
<view wx:for="{{list}}" wx:key="index" > {{item}} </view>
<button bind:tap="updateList">修改数据</button>
javascript 复制代码
// pages/test/test.js
Page({
  data: {
    list:[1,2,3,4,5]
  },
  updateList() {
    //方式1
    this.data.list.splice(1,1)
    this.setData({
      list: this.data.list
    })
  }
})
javascript 复制代码
// pages/test/test.js
Page({
  data: {
    list:[1,2,3,4,5]
  },
  updateList() {
    //方式1
    // this.data.list.splice(1,1)
    //方式2
    const newList = this.data.list.filter(item=>item!==2);
    this.setData({
      list: newList
    })
  }
})
相关推荐
「、皓子~14 分钟前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
nbsaas-boot40 分钟前
[特殊字符] 分享裂变新姿势:用 UniApp + Vue3 玩转小程序页面分享跳转!
小程序·uniapp·notepad++
老A技术联盟43 分钟前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
you45801 小时前
小程序学习笔记:使用 MobX 实现全局数据共享,实例创建、计算属性与 Actions 方法
笔记·学习·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
MonkeyKing_sunyuhua2 小时前
微信小程序能不能获取物联网的上的设备数据
物联网·微信小程序·小程序
paopaokaka_luck2 小时前
基于SpringBoot+Vue的酒类仓储管理系统
数据库·vue.js·spring boot·后端·小程序
mg6683 小时前
微信小程序入门实例_____从零搭建你的第一个微信小程序
微信小程序·小程序
you45804 小时前
小程序学习笔记:API 的 Promise 化
笔记·学习·小程序
皮皮灬虾4 小时前
微信小程序下单页—地址列表页—新增地址页 页面交互
微信小程序·小程序·交互