美文网首页
微信小程序setData()的使用

微信小程序setData()的使用

作者: pengkiw | 来源:发表于2018-10-27 18:20 被阅读0次

Page.prototype.setData(Object data, Function callback)

callback:(setData引起的界面更新渲染完毕后的回调函数)

setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)

1、设置数据 

可以设置一个或同时多个data数据  

this.setData({

    test:'hello world!',

    info:'data',

})

console.log(this.data.test)   //  结果 =》 “hello world!”
console.log(this.data.info)   //  结果 =》“data”

2、用setData() 设置/修改 对象或数组 里某个属性的值 & 动态设置值

比如修改 下面 medias 对象里 id的值

①key必须带引号

page({

    data:{

            medias:{id:"666",name:"test"},

     },

    changeData :function(){

        this.setData({

            "medias.id":"999”   //key必须带引号

        })

        console.log(this.data.medias.id)  //  结果 =》 “999”
    }

})

②先将 key值用变量保存 ,key值使用时 用[ ]引起来

page({   

    data:{  

        medias:{id:"666", name:"test"}    

     },    

    changeData :function(){     

          var media=“medias.id” ;     //先将 key值用变量保存

          this.setData({       

                 [media]:“999”           // key值使用时 用[ ]引起来

           })    

           console.log(this.data.medias.id)   //  结果 =》 “999” 

    }

})

3⃣️ 动态index  修改data

Page({

    data: {

        dataList: [{

            subTitle: "【冰鲜】马鲛鱼",

            details: "500g~600g/条 1000g130元",

            count: 2,

        },

        {           

            subTitle: "【冰鲜】秋刀鱼",     

          details: "400g~500g/条 1000g80元", 

            count: 3,     

     }]

 }, 

bindReduce(e) {

        var index = e.target.dataset.index;   

              //点击事件从 wxml 获取自定义属性index 用于判断是修改数组中第几个元素的数量

        var count = 'dataList[' + index + '].count'    

         this.setData({

                [count]: this.data.dataList[index].count -1

         })

    }

});

四 不同input 绑定同一个事件 通过 传type 做不同的状态更新

<view class="container">

        <view>
             <label>姓名</label>

            <input bindinput='changeValue' value="{{name}}" data-type="name"></input>

        </view>

    <view>

        <label>手机号</label>

          <input type="number" bindinput='changeValue' value="{{phone}}" data-type="phone">       </input>

    </view>

</view>

changeValue(e){ 

         var value = e.detail.value;
         var type = e.currentTarget.dataset.type;
         this.setData({
                 [type]: value
         })

        console.log('name',this.data.name)
        console.log('phone', this.data.phone)
 }

相关文章

网友评论

      本文标题:微信小程序setData()的使用

      本文链接:https://www.haomeiwen.com/subject/yyuwzftx.html