当前位置: 首页 > article >正文

小程序32-简易双向数据绑定

在WXML中,普通属性的绑定是单向的,例如:<input value="{{value}}" />


如果希望用户输入数据的同时改变data中的数据,可以借助简易双向绑定机制。在对应属性之前添加model:前缀即可:

例如<input model:value="{{value}}" />

注意事项:简易双向绑定的属性值如下限制:
1.只能是一个单一字段的绑定,例如:错误用法:<input model:value="值为 {{value}}" />
2.尚不能写 data 路径,也就是不支持数组和对象,例如:错误用法:<input model:value="{{ a.b }}" />

<!--pages/cart/cart.wxml--><!-- 单向绑定:数据能够影响页面,但是页面更新不会影响数据 -->
<input type="text" value="{{ value }}"/><!-- 双向绑定:数据能够影响页面,页面更新也能够影响数据 -->
<!-- 如果想实现简易双向绑定,需要再对应的属性之前添加 model: -->
<input type="text" model:value="{{ value }}"/><!-- 如果需要犹取复选框的选中效果,需要给checked 添加 model:-->
<checkbox model:checked="{{ ischecked }}" /><!-- 注意事项1:属性值只能是一个单一字段的绑定 -->
<!-- <input type="text" model:value="值为 {{ value }}" />  --><!-- 注意事项2:属性值不能写数据路径,也就是不支持对象和数组 -->
<!-- <input type="text" mode1;value="{{ obj.value }}" /> -->
// pages/cart/cart.js
Page({data: {value: 123,isChecked: false,obj: {value: 123}}
})

http://www.lryc.cn/news/2393247.html

相关文章:

  • jenkins报错java.lang.OutOfMemoryError: Java heap space
  • leetcode669.修剪二叉搜索树:递归法利用有序性精准剪枝
  • Spring Boot 中 @RequestParam 和 @RequestPart 的区别详解(含实际项目案例)
  • Linux入门(十一)进程管理
  • 【课堂笔记】EM算法
  • 怎样将win11+ubuntu双系统的ubuntu从机械硬盘迁移至固态硬盘(1)
  • el-table设置自定义css
  • Compose中导航跳转的实现NavHost
  • VSCode/Cursor中Red Hat Dependency Analytics扩展的自动依赖注入files:分析
  • 【技能篇】RabbitMQ消息中间件面试专题
  • Linux研学-环境搭建
  • Ubuntu系统下可执行文件在桌面单击运行教程
  • Linux之文件进程间通信信号
  • shell脚本打包成可以在麒麟桌面操作系统上使用的deb包
  • 代码随想录算法训练营 Day61 图论ⅩⅠ Floyd A※ 最短路径算法
  • 【Python】yield from 功能解析
  • 私有云大数据部署:从开发到生产(Docker、K8s、HDFS/Flink on K8s)
  • 改写自己的浏览器插件工具 myChromeTools
  • python-pptx去除形状默认的阴影
  • kuboard自带ETCD存储满了处理方案
  • SpringBoot+tabula+pdfbox解析pdf中的段落和表格数据
  • 外包项目交付后还能怎么加固?我用 Ipa Guard 给 iOS IPA 增加了一层保障
  • GitHub push失败解决办法-fatal: unable to access ‘https://github.com/xxx
  • USB MSC SCCI
  • 解决Acrobat印前检查功能提示无法为用户配置文件问题
  • 华为OD最新机试真题-反转每对括号间的子串-OD统一考试(B卷)
  • 电商平台 API、数据抓取与爬虫技术的区别及优势分析
  • 领域驱动设计 (Domain-Driven Design, DDD)
  • 单卡4090部署Qwen3-32B-AWQ(4bit量化)-vllm
  • 漫画Android:Handler机制是怎么实现的?