P51 D06 04 修改data局部数据

<!--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
        })
    }

})

效果图:

P51 D06 04 修改data局部数据

 

上一篇:Photoshop将照片调成温暖阳光色调


下一篇:photoshop制作动感非主流空间闪图教程让别人羡慕你的动画