小程序 wxml 语法 —— 39 简单双向数据绑定

在 WXML 中,普通属性的绑定是单向的,比如 <input value="{{ value }}" />,当数据发生改变时,页面也会随之发生变化,但是当用户在输入框中输入最新内容,最新内容并不会同步给 value 数据,这就是单向数据绑定;

如果希望用户输入数据的同时修改 data 中的数据,可以借助简单双向绑定机制,在对应属性之前添加 model: 前缀即可:例如 <input model:value="{{ value }}" />

注意事项:简易双向绑定的属性值有如下限制:

  • 只能是一个单一字段的绑定,如:错误用法:<input model:value="值为 {{ value }}" />
  • 不能写 data 路径,也就是不支持数组和对象,例如:错误用法:<input model:value="{{ a.b }}" />

下面打开微信开发者工具演示一下如何进行简单双向数据绑定:

在 pages/cate/cate.js 中定义数据,如下所示:

Page({data: {value: 123,isChecked: false}
})

在 pages/cate/cate.wxml 中定义页面样式,如下所示:

<!-- 单向绑定:数据能够影响页面,但是页面更新不会影响到数据 -->
<input type="text" value="{{ value }}"/><!-- 双向绑定:数据能够影响页面,页面更新也能够影响数据 -->
<input type="text" model:value="{{ value }}"/><!-- 如果需要获取复选框的选中效果,需要给 checked 添加 model: -->
<checkbox model:checked="{{ isChecked }}"/> 是否同意该协议

刷新页面,可以看到具体的效果如下:

在这里插入图片描述
当修改页面上的值的时候,通过观看右下角的 AppData 的值可以发现,Page 中对应的数据也相应被修改了,实现了简单的双向数据绑定;

参考视频:尚硅谷微信小程序开发教程

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

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

相关文章

Linux第一次练习

1、找到你的Linux系统上的不同颜色的文件&#xff0c;每一种颜色的文件找到3个以上 蓝色&#xff1a; 白色&#xff1a; 绿色&#xff1a; 红色&#xff1a; 黄色&#xff1a; 2、设置一个ping的别名永久生效&#xff0c;设置一个ymd的别名date %F永久生效

《C#上位机开发从门外到门内》2-2:I2C总线协议及其应用详解

文章目录 一、引言二、I2C总线协议的基本概念三、I2C通信机制3.1 硬件结构与基本原理3.2 信号的起始与终止3.3 数据传输格式及时序3.4 时钟同步与时钟伸展 四、设备寻址与数据传输4.1 I2C设备寻址方式4.2 地址冲突及解决方法4.3 数据传输过程中的确认机制4.4 I2C数据帧结构与传…

Trae IDE:解锁 AI 驱动的高效编程体验

Trae 介绍 Trae 是字节跳动推出的一款面向开发者的 AI 驱动的集成开发环境&#xff08;IDE&#xff09;&#xff0c;于 2024 年 1 月 19 日在新加坡正式发布海外版&#xff0c;2025 年 3 月 3 日发布国内版。海外版由字节跳动旗下的 SPRING&#xff08;SG&#xff09;PTE.LTD.…

玩转python:通俗易懂掌握高级数据结构:collections模块之namedtuple

引言 namedtuple是Python中collections模块提供的一个强大工具&#xff0c;用于创建具有字段名的元组。它不仅具备元组的不可变性&#xff0c;还能通过字段名访问元素&#xff0c;极大地提高了代码的可读性和可维护性。本文将详细介绍namedtuple的关键用法和特性&#xff0c;并…

我的创作纪念日:730天的技术写作之旅

我的创作纪念日&#xff1a;730天的技术写作之旅 机缘 从一篇案例分析开始 2023年3月13日&#xff0c;我写下了第一篇技术博客《软考高级-系统分析师-案例分析-系统维护与设计模式》。那时的初心很简单&#xff1a; 沉淀实战经验——在备考软考系统分析师时&#xff0c;发现…

使用 Arduino 和 ESP8266 Wi-Fi 模块发送电子邮件

使用 Arduino Uno 和 ESP8266 Wi-Fi 模块发送电子邮件 我们正在迈向物联网 (IoT) 世界。这项技术在电子和嵌入式系统中起着非常重要的作用。从任何微控制器或嵌入式系统发送电子邮件都是非常基本的事情,这在 IoT 中是必需的。因此,在本文中,我们将学习“如何使用 Wi-Fi 和…

golang算法二叉树对称平衡右视图

100. 相同的树 给你两棵二叉树的根节点 p 和 q &#xff0c;编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是相同的。 示例 1&#xff1a; 输入&#xff1a;p [1,2,3], q [1,2,3] 输出&#xff1a…

c++介绍智能指针 十二(1)

普通指针&#xff1a;指向内存区域的地址变量。使用普通指针容易出现一些程序错误。 如果一个指针所指向的内存区域是动态分配的&#xff0c;那么这个指针变量离开了所在的作用域&#xff0c;这块内存也不会自动销毁。动态内存不进行释放就会导致内存泄露。如果一个指针指向已…

亚马逊COSMO算法解读:新搜索时代的流量分配与DeepBI AI驱动的智能优化策略

亚马逊COSMO算法的推出&#xff0c;标志着其搜索和推荐系统进入了智能化、个性化的新阶段。该算法通过分析用户购物习惯、搜索历史、浏览行为等数据&#xff0c;为买家提供精准推荐&#xff0c;同时对卖家的运营策略提出了更高的要求。在这一背景下&#xff0c;AI驱动的DeepBI能…

C++编译问题——1模板函数的实现必须在头文件中

今天编译数据结构时&#xff0c;遇见一个编译错误 假设你有一个头文件 SeqList.h 和一个源文件 SeqList.cpp。 SeqList.h #ifndef SEQLIST_H #define SEQLIST_H#include <stdexcept> #include <iostream>template<typename T> class SeqList { private:sta…

安卓实现魔改版 CRC32 算法

版权归作者所有&#xff0c;如有转发&#xff0c;请注明文章出处&#xff1a;https://cyrus-studio.github.io/blog/ 关于 CRC32 算法介绍可以参考这篇文章&#xff1a;常用加解密算法介绍 标准 CRC32 算法 创建 crc32.cpp&#xff0c;使用 C 实现标准 CRC32 算法 #include …

OneHot编码与OrdinalEncoder编码的区别与应用解析

OneHot编码和OrdinalEncoder编码是两种常见的类别特征编码方式&#xff0c;它们的主要目的是将类别数据转换为数值数据&#xff0c;以便机器学习算法能够处理。下面是对这两种编码方式的详细解释和比较&#xff1a; 一、OneHot编码 1. 定义&#xff1a; OneHot编码是一种将每…

python离线安装

Python Releases for Windows | Python.org 下载包地址widows一般是64bit的包 下载完成后双击&#xff0c;在弹出的首个页面会看到下面的图 第一步&#xff1a;建议手动安装 第二步&#xff1a;一定要勾选把版本加入到Path路径 然后就是无脑下一步&#xff0c;到这一步就可…

Web开发-PHP应用文件操作安全上传下载任意读取删除目录遍历文件包含

知识点&#xff1a; 1、安全开发-原生PHP-文件安全操作 2、安全开发-原生PHP-上传读取删除包含等 3、安全开发-原生PHP-代码审计文件安全 一、演示案例-WEB开发-文件安全-上传下载读取 文件上传 $_FILES&#xff1a;PHP中一个预定义的超全局变量&#xff0c;用于在上传文件时…

自然语言处理:文本聚类

介绍 大家好&#xff0c;博主又来和大家分享自然语言处理领域的知识了。今天给大家分享的内容是自然语言处理中的文本聚类。 文本聚类在自然语言处理领域占据着重要地位&#xff0c;它能将大量无序的文本按照内容的相似性自动划分成不同的类别&#xff0c;极大地提高了文本处…

JavaScript 运算符详解

引言 在 JavaScript 编程中&#xff0c;运算符是用于对数据进行操作的特殊符号。通过使用运算符&#xff0c;我们可以实现各种计算、比较和逻辑判断等功能。JavaScript 中的运算符种类丰富&#xff0c;涵盖了算术、比较、逻辑、赋值等多个方面。下面将详细介绍各类运算符及其使…

基于javaweb的SpringBoot个人健康管理系统小程序微信小程序设计与实现(源码+文档+部署讲解)

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论…

责任链模式的C++实现示例

核心思想 责任链模式是一种行为设计模式&#xff0c;允许多个对象都有机会处理请求&#xff0c;从而避免请求的发送者与接收者之间的耦合。请求沿着处理链传递&#xff0c;直到某个对象处理它为止。 解决的问题 ​解耦请求发送者与处理者&#xff1a;请求的发送者无需知道具…

Java 无 GUI 浏览器:HtmlUnit 入门及实战 [特殊字符]

文章目录 HtmlUnit 入门功能简介入门案例更多功能HtmlUnit 实战需求页面分析编码参考⭐ 本文目标: HtmlUnit 框架入门HtmlUnit 框架实战:实现 HtmlUnit 访问 Web 页面,并实现 Web 页面按钮点击,同时获取到下载的文件。HtmlUnit 入门 🚀 官网:https://htmlunit.sourcefo…

微软 NativeAOT

微软Native AOT&#xff08;Ahead-Of-Time&#xff09;是.NET平台中一种新的运行模式&#xff0c;它直接将IL&#xff08;Intermediate Language&#xff0c;中间语言&#xff09;代码编译为目标平台的机器码发布&#xff0c;与JIT&#xff08;Just-In-Time&#xff0c;即时编译…