微信小程序开发系列(十八)·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.mzph.cn/news/732386.shtml

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

相关文章

激光打标机红光与激光不重合:原因及解决方案

激光打标机红光和激光不在一个位置的问题可能由多种原因导致。以下是一些可能的原因和解决方法&#xff1a; 1. 激光器光路调整不当&#xff1a;激光器光路调整不当会导致激光束偏移&#xff0c;从而使红光与激光不重合。解决方法是重新调整激光器的光路&#xff0c;确保激光束…

【文档智能】再谈基于Transformer架构的文档智能理解方法论和相关数据集

前言 文档的智能解析与理解成为为知识管理的关键环节。特别是在处理扫描文档时&#xff0c;如何有效地理解和提取表单信息&#xff0c;成为了一个具有挑战性的问题。扫描文档的复杂性&#xff0c;包括其结构的多样性、非文本元素的融合以及手写与印刷内容的混合&#xff0c;都…

C# winform 重启电脑

一、重启电脑指令 windows7系统的启动文件夹为“开始菜单”——“所有程序”里面就有“启动”文件夹&#xff0c;其位置是 “C:\Users\Administrator\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup” 如果没有&#xff0c;则需要将其中的"administrator…

【正点原子STM32探索者】CubeMX+Keil开发环境搭建

文章目录 一、简单开箱二、资料下载三、环境搭建3.1 安装Keil MDK3.2 激活Keil MDK3.3 安装STM32CubeMX3.4 安装STM32F4系列MCU的Keil支持包 四、GPIO点灯4.1 查阅开发板原理图4.2 创建STM32CubeMX项目4.3 配置系统时钟和引脚功能4.4 生成Keil项目4.5 打开Keil项目4.6 编译Keil…

Java学习笔记NO.18

T1.理工超市 &#xff08;1&#xff09;题目描述 编写一个程序&#xff0c;设计理工超市功能菜单并完成注册和登录功能的实现。显示完菜单后&#xff0c;提示用户输入菜单项序号。当用户输入<注册>和<登录>菜单序号时模拟完成注册和登录功能&#xff0c;最后提示…

使用Python快速提取PPT中的文本内容

直接提取PPT中的文本内容可以方便我们进行进一步处理或分析&#xff0c;也可以直接用于其他文档的编撰。通过使用Python程序&#xff0c;我们可以快速批量提取PPT中的文本内容&#xff0c;从而实现高效的信息收集或对其中的数据进行分析。本文将介绍如何使用Python程序提取Powe…

HTML5基础2

drag 可以把拖放事件拆分成4个步骤 设置元素为可拖放。为了使元素可拖动&#xff0c;把 draggable 属性设置为 true 。 <img draggable"true"> 拖动什么。ondragstart 和 setData() const dragestart (ev)>{ev.dataTransfer.setData(play,ev.target.id)} …

Pytorch线性回归实现(原理)

设置梯度 直接在tensor中设置 requires_gradTrue&#xff0c;每次操作这个数的时候&#xff0c;就会保存每一步的数据。也就是保存了梯度相关的数据。 import torch x torch.ones(2, 2, requires_gradTrue) #初始化参数x并设置requires_gradTrue用来追踪其计算历史 print(x…

AndroidStudio跑马灯实现

在activity_main.xml中编写如下代码&#xff1a; <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_h…

meta元数据元素

文章目录 元数据Metadatameta标签的四种使用方式meta的属性meta使用示例 HTML <meta> 元素表示那些不能由其他 HTML标签&#xff08; <style>、 <script>等&#xff09;表示的元数据信息。 元数据Metadata Metadata元数据&#xff0c;简单地来说就是描述…

Linux——权限的理解

Linux——权限的理解 文章目录 Linux——权限的理解一、shell命令以及运行原理二、Linux权限的概念切换用户对指令提权 三、Linux权限管理1. 文件访问者的分类&#xff08;人&#xff09;2. 文件类型和访问权限&#xff08;事物属性&#xff09;文件类型基本权限文件权限值的表…

Linux系统安装及简单操作

目录 一、Linux系统安装 二、Linux系统启动 三、Linux系统本地登录 四、Linux系统操作方式 五、Linux的七种运行级别&#xff08;runlevel&#xff09; 六、shell 七、命令 一、Linux系统安装 场景1&#xff1a;直接通过光盘安装到硬件上&#xff08;方法和Windows安装…

小白跟做江科大51单片机之DS1302可调时钟

原理部分 1.DS1302可调时钟介绍 单片机定时器主要占用CPU时间&#xff0c;掉电不能继续运行 图1 2.原理 图2 内部有寄存器&#xff0c;寄存的时候以时分秒寄存&#xff0c;以通信协议实现数据交互&#xff0c;就可以实现对数据进行访问和读写 3.主要寄存器定义 CE芯片使能…

js对象 静态方法和实例方法

求下面代码的输出结果&#xff1a; 首先先分析一下上面各函数&#xff1a; Person.say function(){console.log("a")} 第一个say()方法是定义在Person函数身上的&#xff0c;我们如果想使用这个方法&#xff0c;可以通过Person().say()来调用 this.say function()…

【Docker7】Docker安全及https安全认证

Docker安全及https安全认证一、Docker 容器与虚拟机的区别1、隔离与共享2、性能与损耗3、不同点 二、Docker 存在的安全问题1、Docker 自身漏洞2、Docker 源码问题 三、Docker 架构缺陷与安全机制1、容器之间的局域网攻击2、DDoS 攻击耗尽资源2.1 什么叫CC攻击&#xff1f;什么…

Python实现汉诺塔演示程序

Python实现汉诺塔演示程序 汉诺塔问题 一个板子上有三根柱子以及一些大小各不相同的圆盘。我们分别把这三根柱子叫做起始柱A、辅助柱B及目标柱C&#xff0c;汉诺塔移动圆盘的规则如下&#xff1a; 把起始柱A上所有的圆盘都移动到C柱&#xff0c;且在移动过程中始终保持圆盘从…

先进电机技术 —— 伺服驱动器与变频器

一、变频器与伺服驱动器发展趋势 在近年来的技术发展中&#xff0c;变频器和伺服驱动器均呈现出显著的先进性提升和技术融合趋势&#xff0c;以下是一些主要的发展方向&#xff1a; ### 变频器的发展趋势&#xff1a; 1. **智能化与网络化**&#xff1a; - 高级变频器集成…

【知识分享】自动化测试首选接口自动化?

在分层测试的“金字塔”模型中&#xff0c;接口测试属于第二层服务集成测试范畴。 相比UI自动化测试而言&#xff0c;接口自动化测试收益更大&#xff0c;且容易实现&#xff0c;维护成本低&#xff0c;有着更高的投入产出比。因此&#xff0c;项目开展自动化测试的首选一般为接…

计算机网络(基础篇)复习笔记——体系结构/协议基础(持续更新中......)

目录 1 计算机网络基础相关技术Rip 路由更新操作 2 体系结构(OSI 7层, TCP/IP4层)应用层运输层网络层IPv4无分类域间路由选择 CIDRIPV6 数据链路层循环冗余校验CRC协议设备 物理层传输媒体信道复用技术宽带接入技术数据通信 3 网络局域网(以太网Ethernet) 4 通信过程编码:信道极…

vue router 解决路由带参数跳转时出现404问题

我的页面是从一个vue页面router跳转到另一个vue页面&#xff0c;并且利用windows.open() 浏览器重新创建一个页签。但是不知道为什么有时候可以有时候又不行&#xff0c;经过反复测试与分析&#xff0c;最终发现是因为有一个参数的值里包含了小数点., 小数点是浏览器合法字符&a…