微信小程序开发系列(十八)·wxml语法·声明和绑定数据

目录

1.  双大括号写法·用法一:展示内容

步骤一:创建一个data对象

步骤二:双大括号写法的使用

步骤三:拓展

2.  双大括号写法·用法二:绑定属性值

步骤一:给对象赋一个属性值

步骤二:双大括号绑定属性值

步骤三:拓展

3.  双大括号写法·用法三:运算的使用

3.1  算数运算

3.2  三元运算

3.3  逻辑运算

4.  注意事项

4.1  在双大括号内写入if语句

4.2  在双大括号内写入for语句

4.3  调用.js中的方法


        小程序页面中使用的数据均需要在 Page()方法的 data 对象中进行声明定义。

        在将数据声明好以后,在 WXML 使用 Mustache 语法(双大括号{{ }})将变量包起来,从而将数据绑定在 {{ }} 内部可以做一些简单的运算,支持如下几种方式:

1. 算数运算

2. 三元运算

3. 逻辑判断

4. 其他…

注意事项:在{{ }}语法中,只能写表达式,不能写语句,也不能调用 js 相关的方法。

1.  双大括号写法·用法一:展示内容

步骤一:创建一个data对象

        找到index.js文件,将page内的代码删除,创建一个 data 对象:


Page({// 在小程序页面中所需要使用的数据均来自于 data 对象data:{school:'小程序'}
})

步骤二:双大括号写法的使用

        找到index.wxml文件,将其内容删除,编写代码:

<view>{{ school }}</view>

        可以看到此时主界面,显示我们在data中写入的内容: 

步骤三:拓展

       再次找到index.js文件,在date文件中在创建一个对象:


Page({// 在小程序页面中所需要使用的数据均来自于 data 对象data:{school:'小程序',obj:{name:'tom'}}
})

        再次找到index.wxml文件,编写代码:


<view>{{ school }}</view>
<view>{{ obj.name }}</view>

        可以看到:

2.  双大括号写法·用法二:绑定属性值

步骤一:给对象赋一个属性值

        找到index.js文件,在data中添加一个对象,给其赋值:


Page({// 在小程序页面中所需要使用的数据均来自于 data 对象data:{id: 1,school:'小程序',obj:{name:'tom'}}
})

步骤二:双大括号绑定属性值

        首先,我们先不使用双大括号写法,来显示属性值:

<view id="id">绑定属性值</view>

        使用双大括号:

<view id="{{ id }}">绑定属性值</view>

结论:绑定属性值,如果需要动态绑定一个变量,属性值也需要使用双大括号进行包裹。

步骤三:拓展

        首先,我们创建一个复选框:

<checkbox checked="false" />

        其中,true为选中状态,false为未选中状态,若我们不使用大括号,会发现,在false状态下,其还是在选中状态:

那是因为:

如果属性值是布尔值,也需要使用大括号进行包裹

        找到idenx.js文件,加入代码:

    isChecked: false,

        找到index.wxml文件,使用双大括号写法:

<checkbox checked="{{isChecked}}" />

        可以发现此时显示正常。

3.  双大括号写法·用法三:运算的使用

3.1  算数运算

        找到index.js文件,在创建两个参数,赋值分别为2,4:

Page({// 在小程序页面中所需要使用的数据均来自于 data 对象data:{id: 1,A: 2,B: 4,isChecked: false,school:'小程序',obj:{name:'tom'}}
})

        找到index.wxml文件,对A和B分别进行加减乘除运算:

<view>{{ A+1 }}</view>
<view>{{ B-1 }}</view>
<view>{{ A*B }}</view>
<view>{{ B/A }}</view>

3.2  三元运算

        判断A是否等于2或者1:


<view>{{ school }}</view>
<view>{{ obj.name }}</view><view id="{{ id }}">绑定属性值</view><checkbox checked="{{isChecked}}" /><view>{{ A+1 }}</view>
<view>{{ B-1 }}</view>
<view>{{ A*B }}</view>
<view>{{ B/A }}</view><view>{{ A == 2 ? '等于' : '不等于' }}</view>
<view>{{ A == 1 ? '等于' : '不等于' }}</view>

3.3  逻辑运算

        判断id是否等于1或者2:


<view>{{ school }}</view>
<view>{{ obj.name }}</view><view id="{{ id }}">绑定属性值</view><checkbox checked="{{isChecked}}" /><view>{{ A+1 }}</view>
<view>{{ B-1 }}</view>
<view>{{ A*B }}</view>
<view>{{ B/A }}</view><view>{{ A == 2 ? '等于' : '不等于' }}</view>
<view>{{ A == 1 ? '等于' : '不等于' }}</view><view>{{ id == 2 }}</view>
<view>{{ id == 1 }}</view>

4.  注意事项

        注意事项:在{{ }}语法中,只能写表达式,不能写语句,也不能调用 js 相关的方法。

4.1  在双大括号内写入if语句

<view>{{ if (id==1) }}</view>

         会发现此时报错:

4.2  在双大括号内写入for语句

<view>{{ for(const i = 0; i<=10; i++) {} }}</view>

        会发现此时报错: 

4.3  调用.js中的方法

        将obj转换成大写:

<view>{{ obj.name.toUpperCase() }}</view>

         运行后会发现,既没有报错,也没有运算:

微信小程序开发_时光の尘的博客-CSDN博客

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

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

相关文章

Cocos Creator 2d光照

godot游戏引擎是有2d光照的&#xff0c;用起来感觉还是很强大的&#xff0c;不知道他是怎么搞的&#xff0c;有时间看看他们怎么实现的。 之前一直以为cocos社区里面没有2d光照的实现&#xff0c;偶然看到2d实现的具体逻辑&#xff0c;现在整理如下&#xff0c; 一&#xff1…

webpack5零基础入门-2wepack配置项的了解

在使用webpack之前&#xff0c;我们需要对webpack的配置项有一定的认识。 1.五大核心概念 1.entry&#xff08;入口&#xff09; 指示webpack从哪个文件开始打包 2.output (输出) 指示webpack打包完的文件输出到哪里,如何命令等 3.loader(加载器) webpack本身只能处理js…

Linux——文件重定向

目录 前言 一、重定向 二、重定向的运用 三、dup2 四、命令行中的重定向 五、为什么要有标准错误 前言 在之前我们学习了文件标识符&#xff0c;直到close可以使用文件标识符进行关闭&#xff0c;但是当我们关闭1号&#xff08;stdout&#xff09;时&#xff0c;无法往显…

Thingsboard学习杂记

知识杂记 1.遵循磁盘绑定的内存数据库和遵循磁盘支持的内存数据库 遵循磁盘绑定的内存数据库和遵循磁盘支持的内存数据库有不同的工作方式&#xff0c;它们的优点和缺点也不同。 遵循磁盘绑定的内存数据库的优点&#xff1a; 数据库可以支持更大的数据集合&#xff0c;因为数…

springboot整合shiro的实战教程(一)

文章目录 1.权限的管理1.1 什么是权限管理1.2 什么是身份认证1.3 什么是授权 2.什么是shiro3.shiro的核心架构3.1 Subject3.2 SecurityManager3.3 Authenticator3.4 Authorizer3.5 Realm3.6 SessionManager3.7 SessionDAO3.8 CacheManager3.9 Cryptography 4. shiro中的认证4.1…

贝叶斯优化CNN-LSTM回归预测(matlab代码)

贝叶斯优化CNN-LSTM回归预测matlab代码 贝叶斯优化方法则采用贝叶斯思想&#xff0c;通过不断探索各种参数组合的结果&#xff0c;根据已有信息计算期望值&#xff0c;并选择期望值最大的组合作为最佳策略&#xff0c;从而在尽可能少的实验次数下达到最优解。 数据为Excel股票…

JS直接量及其相关对象

什么是直接量 直接量是指不需要创建对象就可以直接使用的变量。ES中的直接量主要有三种类型&#xff1a;表示字符串的string类型、表示数字的number类型和表示true/false的boolean类型。当我们直接将值赋给变量后&#xff0c;ES就会自动判断其类型&#xff0c;而且当参数发生变…

2024038期传足14场胜负前瞻

2024038期售止时间为3月10日&#xff08;周日&#xff09;20点30分&#xff0c;敬请留意&#xff1a; 本期深盘多&#xff0c;1.5以下赔率3场&#xff0c;1.5-2.0赔率2场&#xff0c;其他场次是平半盘、平盘。本期14场整体难度中等偏上。以下为基础盘前瞻&#xff0c;大家可根据…

SpringCloud 各自组件的停更/升级/替换

一、停更不停用 现在 SpringCloud 不再修复 bug&#xff0c;也不再接收合并请求&#xff0c;也不再发布新版本&#xff0c;但是目前还是可以继续使用的。 二、以前的组件 以前 SpringCloud 常用的组件如下图&#xff0c;服务的注册和发现使用 Eureka&#xff0c;服务的负载和调…

民宿租赁系统全栈开发:Java+SpringBoot+Vue+MySQL

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

三甲医院体检科PEIS系统全套源码,可实现健康体检、职业病体检、从业人员体检、妇女儿童体检、外检服务等全方位体检服务

大型体检中心、三甲医院体检科的PEIS系统源码&#xff0c;体检信息系统源码 一套应用于大型体检中心、三甲医院体检科的PEIS系统源码&#xff0c;C#语言开发实现全流程管理。系统从检前&#xff0c;检中&#xff0c;检后整个业务流程提供标准化以及精细化的解决方案。 实现体检…

Springboot进行web开发

创建springboot工程&#xff0c;基于2022版idea pom.xml文件中的插件爆红&#xff1a; 解决方法&#xff1a;给插件加<version>版本号</version> 版本号和<parent></parent>中的版本号一样。 另外有人说重启也可以解决爆红&#xff0c;可以试一下&a…