联系我们 - 广告服务
您的当前位置:主页 > 实战 > 前端 >

数据绑定

来源:未知 编辑:admin 时间:2018-02-02
导读: 微信小程序是通过状态模式进行数据绑定的。状态模式定义一个对象,通过管理其状态的变化,从而让界面做出相应的变化。简单地讲,只要对象状态发生变化,就通知页面更新视图元素。通过以下三个步骤可以实现: 识别哪个UI元素被绑定了相应的对象。 监视对象状态
微信小程序是通过状态模式进行数据绑定的。状态模式定义一个对象,通过管理其状态的变化,从而让界面做出相应的变化。简单地讲,只要对象状态发生变化,就通知页面更新视图元素。通过以下三个步骤可以实现:· 识别哪个UI元素被绑定了相应的对象。· 监视对象状态的变化。· 将所有变化传播到绑定的视图上。如图4-1所示,.wxml文件中的动态数据均来自对应页面的.js文件中Page的data对象。一旦data对象中的数据发生变化,界面就会发生相应的变化。

图4-1 状态模式更新界面数据绑定使用Mustache语法(双大括号)将变量包起来,例如:

运行结果如图4-2所示。

图4-2 运行结果简单绑定绑定数据可以作用于三个位置——内容、组件属性和控制属性,而且还可以处理一些关键字。内容(见图4-2):

组件属性(需要在双引号之内):

如果data对象不再变化,那么效果相当于view组件定义了属性id=item-0。控制属性(需要在双引号之内):

wx:if是条件渲染用到的语法,后面会介绍到。关键字:在.wxml文件中常用的关键字有true和false。· true:boolean类型的true,代表真值。· false:boolean类型的false,代表假值。涉及true和false都需要用{{...}}包裹。

虽然checkbox组件还没有介绍到,但是上面的代码不难看懂。值得注意的是:不要直接写checked="false",其计算结果是一个字符串,转成boolean类型后代表真值。运算可以在{{...}}内进行简单的运算,支持下面几种方式。三元运算:

算数运算:

 
view中的内容为3+3+d。逻辑判断:

字符串运算: 


运行后显示内容:hello微信小程序。数据路径运算: 


运行后显示内容:Hello小程序。组合也可以在Mustache (双大括号如{{}})内直接进行组合,构成新的对象或者数组。 


wx:for是微信小程序列表渲染常见的写法,后面介绍列表渲染时会涉及。在这个位置我们组合成了一个新的数组。最终组合成的数组为[0,1,2,3,4]:

最终组合成的对象是{for:1,bar:2}。也可以用扩展运算符...将一个对象展开:

最终组合成的对象是{a:1,b:2,c:3,d:4,e:5}。如果对象的key和value相同,那么也可以间接地表达。

 
最终组合成的对象是{foo:'my-foo',bar:'my-bar'}。注意:上述方式可以随意组合,但是如果存在变量名相同的情况,则后边的变量名会覆盖前面,如:

最终组合成的对象是{a:5,b:3,c:6}。
责任编辑:admin

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

上一篇:WXML语法
下一篇:条件渲染

网友评论:

在“\templets\demo\comments.htm”原来的内容全部删除,插入第三方评论代码,如果不需要评论功能,删除comments.html里面的内容即可
推荐使用友言、多说、畅言(需备案后使用)等社会化评论插件

Copyright © Tricks资讯网 版权所有
本站所有资讯来源于网络 如有侵权请联系QQ:940910888 技术支持鹏博科技
Top