微信小程序云开发教程-微信小程序的JS基础-视图层数据更新

同学们大家好，我是小伊同学，本节我们将一起学习微信小程序中视图层数据的更新。

 

  之前我们已经学过了要想在wxml中展示变量的值，那么就可以使用数据绑定将变量绑定到wxml组件上进行展示，那么当变量是动态数据时，我们应该怎样把新的变量的值展示出来呢？这就是我们今天将要学习的内容，很多情况下都会用到，例如获取到服务器的数据然后进行更新，在界面中显示出新的数据。

 

  在小程序中，是没有办法让逻辑层的javascript对视图层进行直接更新的，而只能是首先在视图层建立数据绑定，然后在逻辑层的js中，通过对视图层所绑定的内部状态数据的更新（即变量的赋值）来间接的对视图层进行更新。当逻辑层要对内部状态数据的更新的时候，我们在上一讲中提到，可以通过this对data中的变量进行赋值。同时，我们知道，要在wxml中显示变量的值，是要通过数据绑定的方法进行。但是如果大家测试一下就会发现，使用this点data直接赋值虽然能够成功赋值但是并不会触发页面数据的更新。也就是在js中我们对数据变量进行了改变，但是即使数据绑定了，这个值也并不会更新到页面中，页面中仍然显示的是之前的数值。

  那么，我们如何进行页面数据的更新呢，下面我们介绍一种方法，this.setdata方法。他的具体格式如下，在花括号的内容中以变量名加冒号加要给这个变量更新的新的值的格式进行填写，可以有多个变量的更新，每行之间用逗号分隔，这里的变量名不一定要在页面的data中以及定义过，也可以是新的，执行后将会在data中创建新的变量但不会显示在代码中（即可以在wxml中作为数据绑定使用）。

 

 

  例如，我们对刚才的例子进行修改，通过this点setdata方法进行赋值，执行之后，a的值变为8888。我们在wxml中使用数据绑定的方式将a变量的值展示在text组件中，可以看到通过这个方法赋值后，页面的数据进行了更新。之后，我们又通过this方法调用了函数，在函数中我们使用直接赋值，我们看到再次打印，变量a的值确实变为了666，但是666并没有展示在页面上，这就是这两种方式的区别。关于setdata，在使用过程中还有一些注意事项，同学们可以访问微信开发者文档进行学习。

 

  日拱一卒，功不唐捐。涓流所积，终成沧海。

 

想看视频版？

关注公号“微程序学堂”，我们的****即将上线

 

如果你自己写了好文章想投稿

请联系我们