微信小程序开发历程(三)数据绑定

一、WXML及其数据绑定

    微信小程序的开发还是和网页开发不一样的,它有自己独特的标签语言,比如下面我要说到的数据绑定:

    微信小程序开发历程(三)数据绑定

   这就是一个数据绑定的wxml中的一段代码,上面的代码是写在index.wxml文件中的,对应的在index.wxjs中你需要在page--->date中写出与之相对应的代码,来控制上面绑定的数据。

    微信小程序开发历程(三)数据绑定

    通过这样的方式就可以将绑定的{{message}}与index.js中page()方法里的data对象的message属性关联起来来了。当然在程序运行的时候,便会在{{message}}的位置显示出“hello  小程序”字符串。

    微信小程序开发历程(三)数据绑定

       WXML中的数据绑定也是支持条件控制的,就如同其他的语言一样,都是拥有条件控制的功能,但是在WXML中的 if 条件控制又有些不同,但是逻辑思想当然是相同的,不同之处在于使用的语法,具体不同的地方就用代码来感受吧!

    微信小程序开发历程(三)数据绑定

      比如在上面一段代码中,就用到了 if 条件语句,目前的我只学习了3门的高级语言和一门弱语言,里面都有 if 条件的判断,但是在小程序中,这里的条件判断是与绑定数据在一起应用的。我想,大家光是看以上的代码结合上面说到的数据绑定,就应该能够猜测到了其  if  判断的用法。

      既然是与数据绑定相结合使用的,那么在相应的wxml.js文件中就要有一个判断条件来控制该语句的执行,这个判断的条件就像是一个开关一样,同样的道理,“打开开关”就是“true”,“关闭开关”就是“false”。当然了,这个开关控制的“样式”即判断条件,你想让它是什么样子,就根据你自己的意愿了,当然了,最简单粗暴的方式就是“true”和“false”了。

      那么我们来看一看其具体的实现结果是什么样的。上图:

      微信小程序开发历程(三)数据绑定

      这就是所谓的最简单粗暴的,当然相对来说也是最高效的“开关”了,我为什么说是它是“相对高效”的呢,因为我觉得,其他的条件判断语句,就算是再简单的,最终都要转化为“true”、“false”,而在这期间是需要考虑时间效率的。

      微信小程序开发历程(三)数据绑定

    这就是当判断条件为“true”是触发数据的绑定,进而将<view>和数据的显示出来,反之,会隐藏<view>,就不会显示出数据。

 

微信小程序开发历程(三)数据绑定

上一篇:微信小程序对接阿里云视频点播,备忘


下一篇:小程序自定义底部导航