前端wxml取后台js变量值_微信小程序云开发教程WXML入门数据绑定

  同学们大家好,我是小伊同学,今天带领大家学习WXML部分一个重要的知识点,数据绑定。

  简单来讲,数据绑定就是通过双重花括号将一个变量绑定到界面上。

  首先,我们为什么要将变量绑定到页面上呢?因为在制作一个小程序时,很多数据都是后端服务器返回给我们的,我们需要对这些数据进行处理后显示在页面上,也就是说,这些数据是动态的,我每次加载小程序都先去询问服务器,那么我就不能在代码中将这些数据直接写在前端界面中。

  例如,用户的某些操作记录,账户余额等等信息,都唯一地保存在服务器端,而小程序则完成了一个获取并展示的作用。要实现这样的效果,我们就需要在wxml使用变量,当程序运行时通过对变量赋不同的值来完成数据的加载显示。这就是数据绑定的意义。

c95e24f58dd0b8fa303eb856fa35a819.png

  数据绑定的格式是,在wxml文件中需要的地方加入双花括号,括号中写变量名称,然后将该变量在js文件中进行定义。当wxml在加载组件及组件的属性时,会自动将该格式下的变量名拿到js文件中寻找,并将数据值渲染到页面上。

  这样,通过js对该变量的具体值进行改变后,显示在页面上的数值就会跟着改变了。具体示例请看右边的两幅图,上面是页面的wxml文件,中间是页面的js文件,最下面则是运行结果。可以看到,我们在js中对变量的赋值直接显示到了wxml中。

1d089f6a35f6d6cad000abf3cd7fced9.png

  那么,到底在wxml中哪些地方可以使用数据绑定呢?主要有以下几处位置:

  第一,放在内容中,用我们之前学习的组件标签包括起来。

  第二,使用数据绑定来动态改变属性值,包括组件属性或者控制属性,这里的id就是在js中我们需要定义好的变量,而下面的控制属性wx:if语句用于控制这个组件是否显示,如果condition变量为真值则显示,为假不显示。

  最后,用于控制关键字,需要说明的是,这里的true和false并不代表变量,而是boolean类型,表示真值和假值。如果我们直接写成checked=“false”,去掉双重花括号,其计算结果是一个字符串,转成boolean类型后无论是true还是false最后都代表真值。(空字符串才为假)

1601d35e6d1882b523ff84d385db6502.png

  此外,也可以在{{}}内进行简单的运算,例如三元运算和算术运算。在三元运算中,这里的花括号中为一个表达式,其一般形式为变量、空格、问号、空格、数值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的值是多少都不影响结果。

  使用数据绑定还有很多方式,例如逻辑判断、字符串运算、数据路径运算等,也可以在双重花括号内直接进行组合,构成新的对象或者数组,更多内容同学们可以通过微信开发者文档自学。

  好了,本小节的内容就是这些,如果大家有什么问题,欢迎在文末留言,我们明天继续哟~

想看视频版?

关注公号“微程序学堂”,我们的视频教程即将上线

如果你自己写了好文章想投稿

请联系我们

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/501279.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux的实际操作:文件目录类的实用指令(创建目录mkdir 删除目录rmdir 递归删除目录rm -rf)

有时候我们会发现,Linux自带的层级结构的目录就那么几个,但是我们日常使用中不可能就这么几个而已,因此我们还需要主动去创建目录,相当于在原有路径的基础上,创建目录,这个目录值得是文件夹 1.mkdir 目录 …

python重定向cookie_模拟登陆中 302 重定向和 cookies 的一些困惑

我想写一个查询话费和流量的爬虫,关键是实现模拟登陆的这个部分。在登陆过程中,点击登陆之后,登陆表单会 post 到一个地址(这一步浏览器不显示),然后会 302 跳转到登陆成功的页面。我现在想得到登陆成功的 cookies ,不…

python变量名称的规定_Python 趣闻:如何获得变量的名字?

获取变量名今天我们探讨Python中一个看似很简单,实则并不容易的问题。这个问题是:如何获得变量的名字?举例说明,给定一个变量var,给它赋值字符串"foo"。即In [1]: var "foo"现在我们需要得到变量…

举例子说明什么是迭代什么是递归【转载】

举个例子bai&#xff1a;我想求1234..100的值。 迭代的做法&#xff1a;从1到100&#xff0c;顺着往下累加。123,336,6410,10515…… 程序表示&#xff0c; int i1,sum0; while(i<100){ sum sum i; } 递归的做法&#xff1a;我要求1到100的累加值&#xff0c;如果我已经得到…

Linux的实际操作:文件目录类的实用指令(touch cp)

1.touch 空文件 在当前路径下创建空文件 注意&#xff1a;mkdir是创建文件夹&#xff0c;touch是创建文件 那么有同学要问了&#xff0c;这个和上一章讲的vim创建一个文件有什么区别&#xff1f; 区别&#xff1a;vim创建完直接打开文件&#xff0c;touch不会直接…

loss下降auc下降_梯度下降算法 线性回归拟合(附Python/Matlab/Julia源代码)

梯度下降梯度下降法的原理梯度下降法(gradient descent)是一种常用的一阶(first-order)优化方法&#xff0c;是求解无约束优化问题最简单、最经典的方法之一。梯度下降最典型的例子就是从山上往下走&#xff0c;每次都寻找当前位置最陡峭的方向小碎步往下走&#xff0c;最终就会…

台式电脑耳机插孔在哪_吉林戴尔电脑音箱维修app,查看详情_曹操闪修

首页 > 新闻列表 > 正文发布时间&#xff1a;2020-10-24 01:14:13 浏览&#xff1a; 14导读&#xff1a;吉林戴尔电脑音箱维修app, 这样的问题一般只有三种解决方法&#xff0c;一种就是重新新冲突的驱动。第二种方法就是在中改变各自的中断&#xff0c;消除冲突。第三种…

Linux的实际操作:文件目录类的实用指令(rm mv)

其实rm和我们上几节学到的rmdir有点类似 &#xff0c;区别在哪里呢&#xff1f;rm是可以删除文件或者文件夹&#xff0c;rmdir是删除文件夹&#xff0c;而且如果是一个非空文件夹&#xff0c;是不能通过rmdir删除的&#xff0c;需要用rm -rf 去强制递归删除&#xff08;不懂的话…

无法将该对象添加到ldap服务器_LDAP 基础知识

LDAP 基础知识目录简介协议概览目录结构架构&#xff08;Schema&#xff09;对象类&#xff08;objectClass&#xff09;属性&#xff08;Attribute&#xff09;条目&#xff08;Entry&#xff09;LDAP 中的数据常用命令启动和关闭: start-ds / stop-ds检查 LDAP 服务器状态: s…

windows7系统损坏修复_【软件资讯】还在用win7?微软Windows 7系统正式停止技术支持...

本文转自IT之家&#xff0c;作者玄隐。早在2015年1月&#xff0c;微软结束了对Windows 7的主流支持&#xff0c;该公司停止向旧操作系统添加新功能。微软将Windows 7从主流支持转移到扩展支持。2020年1月14日&#xff0c;今天迎来了Windows 7的停止技术支持&#xff0c;微软将把…

Linux的实际操作:文件目录类的实用指令(cat more less)

1.cat 要查看的文件 &#xff08;是以只读的方式打开,区别于vim可以查看文件并且编辑&#xff09; cat -n 要查看的文件 &#xff08;只读&#xff0c;且提供行号&#xff09; cat -n 要查看的文件 | more &#xff08;这个操…

python中pickle模块_Python pickle模块的用法

串行化主要用于网络传输或者持久化。我们知道&#xff0c;网络上的数据都是字节流&#xff0c;如果希望将某个对象传送给远端的机器&#xff0c;首先就必须将其转换成字节流&#xff0c;然后才可以在网络上传输。文件也是字节流&#xff0c;如果希望将某个对象保存到文件中&…

电子测量与仪器第四版pdf_准确选择表面粗糙度仪的测量参数应该从哪些地方着手好【电子仪器吧】...

表面粗糙度仪的参数怎么选择&#xff1f;首先要先满足运用功能要求&#xff0c;其次再兼顾经济性能。即&#xff0c;在满足运用要求的前题下&#xff0c;尽可能下降外表粗糙度要求&#xff0c;放大表面粗糙度允许值。对多数外表面来说&#xff0c;给出高度特色评定参数即可反映…

Linux的实际操作:文件目录类的实用指令(重定向“>“和追加“>>“)

1. > 表示重定向 &#xff08;重定向什么意思呢&#xff1f;就是把一个文件的内容&#xff0c;保存到指定的位置&#xff09; > 是定向输出到文件&#xff0c;如果文件不存在&#xff0c;就创建文件&#xff1b;如果文件存在&#xff0c;就将其清空&#…

wrapper怎么用_用责任链模式设计拦截器

我在 Redant(https://github.com/all4you/redant) 中通过继承 ChannelHandler 实现了拦截器的功能&#xff0c;并且 pipeline 就是一种责任链模式的应用。但是我后面对原本的拦截器进行了重新设计&#xff0c;为什么这样做呢&#xff0c;因为原本的方式是在 ChannelHandler 的基…

VS2019 配色_这个双11,凯里-欧文陪你过!欧文6正式发布,城市版配色真的香

北京时间11月5日&#xff0c;在篮网主场对阵鹈鹕的比赛中&#xff0c;欧文一上场就让教主眼前一亮&#xff0c;这鞋骚的有点过分啊。欧文6代已经于北京时间11月5日正式发布&#xff0c;虽然首发配色毫无惊喜&#xff0c;毕竟早在休赛期就已经被曝得连底裤都不剩了&#xff0c;但…

Linux的实际操作:文件目录类的实用指令(echo head tail)

1.echo 输出内容到控制台 例子&#xff1a;实用echo指令输出环境变量&#xff0c;输出当前的环境变量路径 2.head 用于显示文件的开头部分内容&#xff0c;默认情况下head显示文件的前10行内容&#xff08;因为有些文件比较大&#xff0c;我们有时候不全去看&#xff09; 空格…

如何延长作用域链_通过实例理解javaScript中的this到底是什么和它的词法作用域...

最近&#xff0c;听到李笑来说&#xff0c;讲解编程的过程中&#xff0c;举例子很重要。而且&#xff0c;我最近看的各种javaScript工具书中的例子&#xff0c;也都有点复杂。所以啊&#xff0c;我试着举一些简单又直观的例子&#xff0c;与各位苦学javaScript的同学&#xff0…

word2vector数据集样式_这样做数据可视化驾驶舱,高端大气,一目了然,领导不点赞都难...

2020年了&#xff0c;数据可视化已经不是个新鲜词了&#xff0c;把数据以可视化图表的形式展示并没有多神奇&#xff0c;用Excel等传统的办公工具就可以轻松实现。以前传统数据分析报告就是ppt里贴图表&#xff0c;再配上分析结论&#xff0c;这种形式的数据呈现是静态的&#…

Linux的实际操作:文件目录类的实用指令(ln history)

1.ln 软连接也叫做符号链接&#xff0c;类似于windows的快捷方式&#xff0c;主要是存放了链接其它文件的路径 ln -s 原文件或者目录 软链接名 &#xff08;功能&#xff1a;给原文件创建一个软链接&#xff09; 案例&#xff1a;将/roo…