ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

P51 D06 04 修改data局部数据

2021-10-06 14:32:22  阅读:149  来源: 互联网

标签:D06 04 title dataList percent imageList data id setData


<!--pages/progress/progress.wxml-->

<view>案例</view>
<view>点击按钮完成,将图片1的进度更新至90%</view>
<view wx:for="{{imageList}}">
    <view>{{item.title}}</view>
    <progress percent="{{item.percent}}"></progress>
</view>

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

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

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

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

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

        // 方式3 推荐
        var num = 2;
        this.setData({
            "imageList[0].percent":90
        })
    }

})

效果图:

 

标签:D06,04,title,dataList,percent,imageList,data,id,setData
来源: https://blog.csdn.net/huanglianggu/article/details/120624321

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有