小程序原生-利用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
    })
  }
})
相关推荐
说私域6 小时前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往6 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw6 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
weixin_lynhgworld9 小时前
淘宝扭蛋机小程序系统开发:重塑电商互动模式
大数据·小程序
ᥬ 小月亮12 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
说私域1 天前
技术赋能与营销创新:开源链动2+1模式AI智能名片S2B2C商城小程序的流量转化路径研究
人工智能·小程序·开源
游戏开发爱好者81 天前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
weixin_lynhgworld2 天前
代驾小程序系统开发:引领出行行业数字化转型
小程序
Python大数据分析2 天前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
yzx9910132 天前
JS与Go:编程语言双星的碰撞与共生
java·数据结构·游戏·小程序·ffmpeg