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

2024-03-05 18:12

本文主要是介绍微信小程序开发系列(十八)·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博客

这篇关于微信小程序开发系列(十八)·wxml语法·声明和绑定数据的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

C#监听txt文档获取新数据方式

《C#监听txt文档获取新数据方式》文章介绍通过监听txt文件获取最新数据,并实现开机自启动、禁用窗口关闭按钮、阻止Ctrl+C中断及防止程序退出等功能,代码整合于主函数中,供参考学习... 目录前言一、监听txt文档增加数据二、其他功能1. 设置开机自启动2. 禁止控制台窗口关闭按钮3. 阻止Ctrl +

java如何实现高并发场景下三级缓存的数据一致性

《java如何实现高并发场景下三级缓存的数据一致性》这篇文章主要为大家详细介绍了java如何实现高并发场景下三级缓存的数据一致性,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 下面代码是一个使用Java和Redisson实现的三级缓存服务,主要功能包括:1.缓存结构:本地缓存:使

在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

《在MySQL中实现冷热数据分离的方法及使用场景底层原理解析》MySQL冷热数据分离通过分表/分区策略、数据归档和索引优化,将频繁访问的热数据与冷数据分开存储,提升查询效率并降低存储成本,适用于高并发... 目录实现冷热数据分离1. 分表策略2. 使用分区表3. 数据归档与迁移在mysql中实现冷热数据分

C#解析JSON数据全攻略指南

《C#解析JSON数据全攻略指南》这篇文章主要为大家详细介绍了使用C#解析JSON数据全攻略指南,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、为什么jsON是C#开发必修课?二、四步搞定网络JSON数据1. 获取数据 - HttpClient最佳实践2. 动态解析 - 快速

MyBatis-Plus通用中等、大量数据分批查询和处理方法

《MyBatis-Plus通用中等、大量数据分批查询和处理方法》文章介绍MyBatis-Plus分页查询处理,通过函数式接口与Lambda表达式实现通用逻辑,方法抽象但功能强大,建议扩展分批处理及流式... 目录函数式接口获取分页数据接口数据处理接口通用逻辑工具类使用方法简单查询自定义查询方法总结函数式接口

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

Linux进程CPU绑定优化与实践过程

《Linux进程CPU绑定优化与实践过程》Linux支持进程绑定至特定CPU核心,通过sched_setaffinity系统调用和taskset工具实现,优化缓存效率与上下文切换,提升多核计算性能,适... 目录1. 多核处理器及并行计算概念1.1 多核处理器架构概述1.2 并行计算的含义及重要性1.3 并

Linux下进程的CPU配置与线程绑定过程

《Linux下进程的CPU配置与线程绑定过程》本文介绍Linux系统中基于进程和线程的CPU配置方法,通过taskset命令和pthread库调整亲和力,将进程/线程绑定到特定CPU核心以优化资源分配... 目录1 基于进程的CPU配置1.1 对CPU亲和力的配置1.2 绑定进程到指定CPU核上运行2 基于

MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

《MySQL多列IN查询之语法、性能与实战技巧(最新整理)》本文详解MySQL多列IN查询,对比传统OR写法,强调其简洁高效,适合批量匹配复合键,通过联合索引、分批次优化提升性能,兼容多种数据库... 目录一、基础语法:多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析

SQL中如何添加数据(常见方法及示例)

《SQL中如何添加数据(常见方法及示例)》SQL全称为StructuredQueryLanguage,是一种用于管理关系数据库的标准编程语言,下面给大家介绍SQL中如何添加数据,感兴趣的朋友一起看看吧... 目录在mysql中,有多种方法可以添加数据。以下是一些常见的方法及其示例。1. 使用INSERT I