热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序教程之数据绑定

微信小程序教程之数据绑定,WXML中的动态数据均来自对应Page的data。
数据绑定

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

简单绑定

数据绑定使用"Mustache"语法(双大括号)将变量包起来,可以作用于:

内容

{{ message }}

Page({  
 data: {  
 message: 'Hello MINA!'  
 }  
})


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

Page({  
 data: {  
 id: 0  
 }  
})

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

Page({  
 data: {  
 condition: true  
 }  
})

运算

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

三元运算



算数运算

{{a + b}} + {{c}} + d

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

view中的内容为3 + 3 + d

逻辑判断



字符串运算

{{"hello" + name}}

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

组合

也可以在Mustache内直接进行组合,构成新的对象或者数组

数组

{{item}}

Page({  
 data: {  
 zero: 0  
 }  
})

最终组合成数组[0, 1, 2, 3, 4]

对象

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

最终组合成的对象是{for: 1, bar: 2}

也可以用扩展运算符...来将一个对象展开

  
Page({  
 data: {  
 obj1: {  
  a: 1,  
  b: 2  
 },  
 obj2: {  
  c: 3,  
  d: 4  
 }  
 }  
})

最终组合成的对象是{a: 1, b: 2, c: 3, d: 4, e: 5}

如果对象的key和value相同,也可以间接地表达

Page({  
 data: {  
 foo: 'my-foo',  
 bar: 'my-bar'  
 }  
})

最终组合成的对象是{foo: 'my-foo', bar:'my-bar'}

注意:上述方式可以随意组合,但是如有存在变量名相同的情况,后边的会覆盖前面,如

Page({  
 data: {  
 obj1: {  
  a: 1,  
  b: 2  
 },  
 obj2: {  
  b: 3,  
  c: 4  
 },  
 a: 5  
 }  
})

最终组合成的对象是{a: 5, b: 3, c: 6}

以上就是微信小程序 教程之数据绑定的内容,更多相关内容请关注PHP中文网(www.php.cn)!

推荐阅读
  • 本文将深入探讨PHP编程语言的基本概念,并解释PHP概念股的含义。通过详细解析,帮助读者理解PHP在Web开发和股票市场中的重要性。 ... [详细]
  • 本文详细介绍了如何使用 PHP 接收并处理微信支付的回调结果,确保支付通知能够被正确接收和响应。 ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • 区块链的兴起:恰逢其时,犹如1996年的互联网
    本文探讨了区块链技术的发展阶段,将其与1996年互联网的兴起进行对比,分析了当前区块链技术的现状及其未来潜力。 ... [详细]
  • 新冠肺炎疫情期间,各大银行积极利用手机银行平台,满足客户在金融与生活多方面的需求。线上服务不仅激活了防疫相关的民生场景,还推动了银行通过互联网思维进行获客、引流与经营。本文探讨了银行在找房、买菜、打卡、教育等领域的创新举措。 ... [详细]
  • Google最新推出的嵌入AI技术的便携式相机Clips现已上架,旨在通过人工智能技术自动捕捉用户生活中值得纪念的时刻,帮助人们减少照片数量过多的问题。 ... [详细]
  • 本文介绍了如何使用PHP代码实现微信平台的媒体素材上传功能,详细解释了API接口的使用方法和注意事项,确保文件路径正确以避免常见的错误。 ... [详细]
  • 深入理解小程序中的Picker组件
    Picker组件是一种从屏幕底部弹出的滚动选择器,支持多种选择模式,包括普通选择器、多列选择器、时间选择器、日期选择器和省市区选择器。本文将详细介绍Picker的各种属性及其应用场景。 ... [详细]
  • 微信小程序中实现位置获取的全面指南
    本文详细介绍了如何在微信小程序中实现地理位置的获取,包括通过微信官方API和腾讯地图API两种方式。文中不仅涵盖了必要的准备工作,如申请开发者密钥、下载并配置SDK等,还提供了处理用户授权及位置信息获取的具体代码示例。 ... [详细]
  • 本文探讨了在C语言编程中,如何有效避免多文件项目中的重定义问题,通过合理使用预处理器指令和extern关键字,确保代码的健壮性和可维护性。 ... [详细]
  • 掌握Spring MVC中自定义类型转换与格式化的技巧
    近期,在开发一款小程序的过程中遇到了几个Spring MVC接口需要传递时间参数的问题。本文将详细介绍如何利用Java 8 Time API在Spring MVC中实现时间参数的自定义类型转换和格式化。 ... [详细]
  • 探讨在微信小程序环境中是否能够获取到全局this对象,并分析其背后的技术实现。 ... [详细]
  • 智慧城市建设现状及未来趋势
    随着新基建政策的推进及‘十四五’规划的实施,我国正步入以5G、人工智能等先进技术引领的智慧经济新时代。规划强调加速数字化转型,促进数字政府建设,新基建政策亦倡导城市基础设施的全面数字化。本文探讨了智慧城市的发展背景、全球及国内进展、市场规模、架构设计,以及百度、阿里、腾讯、华为等领军企业在该领域的布局策略。 ... [详细]
  • 微信小程序koa获取微信accesstoken ... [详细]
  • 鸿蒙系统实战:打造高效聊天辅助应用
    通过鸿蒙系统开发一款高效的聊天辅助应用,本教程将详细展示从零开始构建这一实用工具的全过程,旨在为开发者提供全面的技术指导。 ... [详细]
author-avatar
沈丶小浪_171
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有