阅读 32

小程序学习-修改data局部数据

案例:

 

 原始文件:

wxml:


<text>pages/progress/progress.wxmltext>
<progress percent="20"> progress>
abcd
<progress percent="50" activeColor="#DC143C">progress>
<view>-----案例------view>
<view>点击按钮完成,将图片1的进度条更新为80%view>
<view wx:for="{{imageList}}" >
  <view>{{item.title}}view>
  <progress percent="{{item.percent}}"  >progress>
view>

<button bindtap="changePercent" >点击button>

js:

// pages/progress/progress.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    percent1: 20,
    percent2: 50,
    imageList: [
      { id: 1, title: "图片1", percent: 20 },
      { id: 1, title: "图片2", percent: 30 },
      { id: 1, title: "图片3", percent: 60 },
    ]
  },
})

如何实现局部数据修改:敲黑板

changePercent:function(){
    // 方式1:错误
    /*
    this.setData({
      imageList[0].person: 80
    });
    */
    

方式2:

    // 方式2:可以,由于需要全部修改,所以性能差。
    /*
    var dataList = this.data.imageList;
    dataList[0].percent = 80;
    this.setData({
      imageList: dataList
    });
    */

方式3:

  // 方式3:推荐
    var num = 2;
    this.setData({
      ["imageList[0].percent"]:80
      ["imageList[" + num + "].percent"]: 90,
      ["imageList[1].title"]:"hello world"
    })

 

 

  changePercent: function (e) {
    var num = 2
    this.setData({
      ["imageList[0].percent"]: 80,
      ["imageList[" + num + "].percent"]: 90,
      ["imageList[1].title"]: "Hello world!"
    })
  },

 

原文:https://www.cnblogs.com/xiao-apple36/p/12915580.html

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐