微信小程序开发系列(十八)·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;都…

Java本地接口(Java Native Interface,JNI)讲解

Java本地接口&#xff08;Java Native Interface&#xff0c;JNI&#xff09;是一个编程框架&#xff0c;允许Java代码与其他语言写的代码&#xff0c;特别是C和C&#xff0c;进行交互。这个功能使得Java程序能够调用系统级别的库和那些已经用这些语言实现的库。JNI主要用于两个…

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…

模拟实现C语言库函数(strlen,strcpy,strcat)

模拟实现strlen 三种方法 size_t my_strlen(char* s)//计数器 {size_t count 0;while (*(s))count;return count; }size_t my_strlen(char* s)//递归 {if (*s \0)return 0;elsereturn my_strlen(s) 1; }size_t my_strlen(char* s)//指针-指针 {char* tmp s;while (*(s));…

设计模式-代理模式使用教程

在 Java 中实现代理模式通常包括两种方式&#xff1a;静态代理和动态代理。静态代理是在编译时就已经确定代理类和真实对象的关系&#xff0c;而动态代理则是在运行时动态生成代理类。下面&#xff0c;我会分别解释如何在项目中实践这两种代理模式。 静态代理 定义接口&#…

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…

软考笔记--系统架构评估

系统架构评估是在对架构分析、评估的基础上&#xff0c;对架构策略的选取进行决策。它利用数据或逻辑分析技术&#xff0c;针对系统的一致性&#xff0c;正确性&#xff0c;质量属性&#xff0c;规划结果等不同方面&#xff0c;提供描述性&#xff0c;预测性和指令性的分析结果…

C#协变与逆变:解锁高级编程技巧,轻松提升代码性能

文章目录 协变协变接口的实现逆变里氏替换原则 协变 协变概念令人费解&#xff0c;多半是取名或者翻译的锅&#xff0c;其实是很容易理解的。 比如大街上有一只狗&#xff0c;我说大家快看&#xff0c;这有一只动物&#xff01;这个非常自然&#xff0c;虽然动物并不严格等于…

【Spring Boot `@Autowired` Annotation】

文章目录 1. 使用Qualifier注解2. 使用Primary注解3. 手动注入&#xff08;较少推荐&#xff09; 在Spring Boot中&#xff0c;Autowired注解用于自动装配bean。默认情况下&#xff0c;它按照类型进行装配。当存在多个相同类型的bean时&#xff0c;就会出现以下错误&#xff1a…

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…

题目 1971: 外出旅游

题目描述: 佳佳带着f个水果和m元钱出去玩&#xff0c;每天房屋的租金为x元&#xff0c;佳佳每天早上必须吃一个水果&#xff0c;佳佳通过询问商店的服务人员 得到了水果的价格&#xff0c;每个水果售卖p元。请你计算一下佳佳最多可以在外面待多长时间&#xff1f; 代码: pac…

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芯片使能…