视图层-WXML-数据绑定

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:视图上的数据都必须用过事件传递给对象,只有用户操作视图,才能获取到数据,并更新对象状态。


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容