学习微信小程序WXML之数据绑定

文档：数据绑定 · 小程序
此贴为学习9 小时搞定微信小程序开发 的笔记

数据绑定使用两个花括号。

1. 绑定文本内容

<!--index.wxml-->
<view>
    <text>{
    
    {
    
    message}}</text>
</view>

//index.js
Page({
    data:{
        message:"Hello,world"
    }
})

2. 绑定属性

<!-- index.wxml -->
<view>
    <text data-name="{
    
    {
    
    theName}}">
    </text>
</view>

data-name为自定义属性，当组件上触发的事件时，会把data-*属性发送给事件处理函数。所以可以把页面上的数据通过data属性传给逻辑层。

//index.js
Page({
    data: {
        theName:"Jack"
    }
})

3.运算符绑定

<!-- index.wxml -->
<view hidden="{
    
    {
    
    flag ? true : false}}">
    Hidden
</view>

view标签的hidden属性可以设置显示或隐藏view标签的内容。

//index.js
Page({
    data:{
        flag: false
    }
})

传入flag变量为false，hidden属性为false，显示标签内容；如果flag变量为true，则显示view标签内容。

还有其他绑定方式，请看小程序框架文档：数据绑定 · 小程序

标签属性

所有组件都有的共同属性：

详见：组件 · 小程序
bind、catch可以绑定组件的事件，通过绑定事件的回调函数来进行一些操作。详见：事件 · 小程序