前端wxml取后台js变量值_微信小程序云开发教程WXML入门数据绑定
同学们大家好，我是小伊同学，今天带领大家学习WXML部分一个重要的知识点，数据绑定。
简单来讲，数据绑定就是通过双重花括号将一个变量绑定到界面上。
首先，我们为什么要将变量绑定到页面上呢？因为在制作一个小程序时，很多数据都是后端服务器返回给我们的，我们需要对这些数据进行处理后显示在页面上，也就是说，这些数据是动态的，我每次加载小程序都先去询问服务器，那么我就不能在代码中将这些数据直接写在前端界面中。
例如，用户的某些操作记录，账户余额等等信息，都唯一地保存在服务器端，而小程序则完成了一个获取并展示的作用。要实现这样的效果，我们就需要在wxml使用变量，当程序运行时通过对变量赋不同的值来完成数据的加载显示。这就是数据绑定的意义。
数据绑定的格式是，在wxml文件中需要的地方加入双花括号，括号中写变量名称，然后将该变量在js文件中进行定义。当wxml在加载组件及组件的属性时，会自动将该格式下的变量名拿到js文件中寻找，并将数据值渲染到页面上。
这样，通过js对该变量的具体值进行改变后，显示在页面上的数值就会跟着改变了。具体示例请看右边的两幅图，上面是页面的wxml文件，中间是页面的js文件，最下面则是运行结果。可以看到，我们在js中对变量的赋值直接显示到了wxml中。
那么，到底在wxml中哪些地方可以使用数据绑定呢？主要有以下几处位置：
第一，放在内容中，用我们之前学习的组件标签包括起来。
第二，使用数据绑定来动态改变属性值，包括组件属性或者控制属性，这里的id就是在js中我们需要定义好的变量，而下面的控制属性wx：if语句用于控制这个组件是否显示，如果condition变量为真值则显示，为假不显示。
最后，用于控制关键字，需要说明的是，这里的true和false并不代表变量，而是boolean类型，表示真值和假值。如果我们直接写成checked=“false”，去掉双重花括号，其计算结果是一个字符串，转成boolean类型后无论是true还是false最后都代表真值。(空字符串才为假)
此外，也可以在{{}}内进行简单的运算，例如三元运算和算术运算。在三元运算中，这里的花括号中为一个表达式，其一般形式为变量、空格、问号、空格、数值A、冒号、数值B。当变量等于第一个值时，表达式的结果为真，也就是这里flag变量为真值，即等于true时，最终hidden属性为true，即组件被隐藏，而当flag为false时，表达式结果为假，组件不被隐藏。
在进行算数运算时要注意，只有在双重花括号中的运算符，如加号减号等，具有运算符的作用，对前后的变量值完成算术运算，而在花括号外的运算符没有运算能力，仅仅是字符串。
所以对于这里的例子来说，如果a等于1，b等于2，c等于3，d等于4，那么最终会显示3+3+d这个字符串，运算只在a变量和b变量之间完成，d由于没有加花括号，仅仅是字符串，无论d是否在js中定义或者d的值是多少都不影响结果。
使用数据绑定还有很多方式，例如逻辑判断、字符串运算、数据路径运算等，也可以在双重花括号内直接进行组合，构成新的对象或者数组，更多内容同学们可以通过微信开发者文档自学。
好了，本小节的内容就是这些，如果大家有什么问题，欢迎在文末留言，我们明天继续哟~
想看视频版？
关注公号“微程序学堂”，我们的视频教程即将上线
如果你自己写了好文章想投稿
请联系我们
前端wxml取后台js变量值_微信小程序云开发教程WXML入门数据绑定相关推荐
- 微信小程序云函数传递数组_微信小程序云开发一周入门
作为一个程序员,一直想自己做一款程序,无奈工作以来一直做的是数据处理的工作.数据库用的挺溜,但前端就两眼一抹黑了.早在微信小程序刚出来的时候,就关注过,但考虑到前端后端的种种因素,一直没太做深入的了解 ...
- 页面url带参数_微信小程序云开发教程微信小程序的JS高级页面间数据传递
同学们大家好,我是小伊同学,上一节课我们讲解了全局数据的读写方法,那么在页面间同样需要数据交互,今天我们就来学习这部分内容. 在微信小程序中,我们常常需要将数据在页面之间进行传递,比如用户的身份信息, ...
- uniapp同步获取用户信息_微信小程序云开发教程微信小程序的API入门获取用户身份信息系列API...
同学们大家好,我是小伊同学,上一节我们介绍了一些常用API,今天我们接着来学习一组API,那就是获取用户身份信息的API. 在微信小程序中,我们往往需要获取用户的身份信息,比如昵称.头像.性别.地区等 ...
- 前端wxml取后台js变量值_这些鲜为人知的前端冷知识，你都GET了吗？
背景 最近公司项目不多,比较清闲,划水摸鱼混迹于各大技术博客平台,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来,不由的发出一声感叹! 前端可真是博大精深 于是 ...
- mysql导入微信小程序云开发_微信小程序-云开发数据库上传json文件
小程序新增了云开发功能,对于个人开发者是个利好消息.可以省去购买服务器,购买域名以及繁琐配置等步骤,减轻了开发者的负担.至于如何云开发我就不在这里赘述了,请移步微信小程序云开发官方文档,说的很清楚.这 ...
- node.js 微信小程序 部署服务器_微信小程序云开发环境部署，及添加数据
点击蓝字 关注我们 今天在漫无目的逛CSDN的时候,一篇关于微信公众号云开发的文章引起了我的注意.据介绍,小程序云开发简称tcb,是腾讯爸爸给我们提供的基于腾讯云的云服务器.目前云开发已包含云数据库, ...
- ebs开发入门 oracle 知乎_微信小程序云开发入门第一篇---开发准备事项
在开始本文的正式内容之前,先允许我做一个简单的自我介绍,我是一名嵌入式软件开发人员,目前在一家音视频处理芯片公司做linux系统下音视频开发的相关工作,算是嵌入式软件开发行业的老人了,如果您对嵌入式行 ...
- 微信小程序云开发用户身份登录_微信小程序+云开发实现欢迎登录注册
前段时间和同学一起做了一个小程序,用来参加学校的比赛,完成后把项目内容分割一下,贴到博客上面,算是学习记录和总结吧. 因为是学生党,而且并没有很大的需要,所以选择了微信小程序为开发者提供的" ...
- 微信小程序mysql查询_微信小程序云开发数据库操作查询记录
官方文档解读: 查询记录 1. 打开 pages/databaseGuide/databaseGuide.js 文件,定位到 onQuery 方法 2. 把注释掉的代码解除注释,onQuery 方法会 ...
最新文章
- hdfs.DFSClient: Exception in createBlockOutputStream
- 科普 | 你必须了解的漏洞利用缓解及对抗技术
- boost::fusion::transform用法的测试程序
- 依赖注入_List_Set_Array类型的注入
- leetcode 189. 旋转数组
- javascript console 函数详解 js开发调试的利器 浏览：3201|更新：2014-05-30 09:27
- python海贼王logo_Python 实现的下载op海贼王网的图片（网络爬虫）
- pip安装gluonts
- Bootstrap Paginator分页插件(mark)
- 计算机组成原理完整学习笔记（八）：控制器设计
- 解决 用VirtualBox安装Windows95后启动乱码
- 打印时显示rpc服务器不可用,打印时出现RPC服务器不可用 ?
- Cadence Allegro如何复用设计参数？
- 四个技巧教你解决电磁干扰问题
- Maven插件之versions-maven-plugin
- Flink 网络流控和反压剖析详解
- 串口、网口等自定义通信协议的问题
- 通过域名访问接口，报400
- 论文笔记：WWW 2019 Heterogeneous Graph Attention Network
- intel历代架构演进6—— SIMD指令集