视图层-WXML-数据绑定

2018-10-28  本文已影响0人  小美人鱼最可爱

WXML中的动态数据均来自于Page中的data


单向数据绑定:指的是我们先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里面。(无法自主更新数据)。

双向数据绑定:数据模型(Module)和视图(View)之间的双向绑定。


简单绑定

使用 {{}} 将变量包裹起来

<view>{{ message }}</view>

Page({

            data: {

                    message:'Hello MINA!'

                    }

})

一、组件属性(双引号之内)

<view id="item-{{id}}"></view>

Page({

            data: {

                    id:0

                    }

})

二、控制属性(需要在双引号之内)

<view wx:if="{{condition}}""></view>

Page({

            data: {

                       condition:true

                    }

})

三、关键字(需要在双引号之内)

true:boolean 类型的 true,代表真值。

false: boolean 类型的 false,代表假值。

<checkbox checked="{{true}}"> </checkbox>

注1:数据流向是单向的,即视图变化不会影响对象状态。

注2:视图上的数据都必须用过事件传递给对象,只有用户操作视图,才能获取到数据,并更新对象状态。

上一篇下一篇

猜你喜欢

热点阅读