一、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>,就不会显示出数据。
除此之外,wx:if属性还支持elseif与else分支,不过,不同的是elseif的表达式在WXML中是wx:elif,具体的使用方法如下:
上面的例子说明,if条件判断,微信小程序创新了自己的规范,其实在基本原理上是同根同源的。在相应的index.wxjs中 的data属性中定义isshow的值便可以进行判断了。
结果是这样的:
通过结果,我相信大家对小程序的if条件判断拥有了自己的直观理解了吧。