发表于： 2019-11-18 20:06:11

1 1260

今天完成的事情

微信小程序中的数据绑定

数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

简单绑定

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

内容

<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="{{false}}"> </checkbox>

特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

运算

可以在 {{}} 内进行简单的运算，支持的有如下几种方式：

三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>


算数运算

<view> {{a + b}} + {{c}} + d </view>


Page({
    data: {
        a: 1,
        b: 2,
        c: 3
    }
})

view中的内容为 3 + 3 + d。

逻辑判断

<view wx:if="{{length > 5}}"> </view>


字符串运算

<view>{{"hello" + name}}</view>


Page({
    data: {
        name: 'MINA'
    }
})

数据路径运算

<view>{{object.key}} {{array[0]}}</view>


Page({
    data: {
        object: {
            key: 'Hello '
        },
        array: ['MINA']
    }
})


今天遇到的问题

微信小程序还未完成: 主要问题在于对象内数据的相加比较麻烦，还没做出来


今天的收获

学习了微信小程序的数据渲染方法


明天的计划

争取把对象数据的相加方法做出来


上一篇
返回列表 返回列表
下一篇
现在开始，找个师兄带你入门
评论

    分享到

    技能树  |  IT修真院

    关于我们 ｜ 联系我们 ｜ 合作公司

    移动端下载

    友情链接

    短信验证码     

    微信公众平台

    Copyright © 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1