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

小程序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}}
})

相关文章:

  • 3DMAX+Photoshop教程:将树木和人物添加到户外建筑场景中的方法
  • Electron-vite【实战】MD 编辑器 -- 文件列表(含右键快捷菜单,重命名文件,删除本地文件,打开本地目录等)
  • 深入详解DICOMweb:WADO与STOW-RS的技术解析与实现
  • React-props
  • Go语言使用阿里云模版短信服务
  • AAAI 2025论文分享│STD-PLM:基于预训练语言模型的时空数据预测与补全方法
  • LVS-DR 负载均衡集群
  • 计算机网络第一章课后练习
  • Spring Boot 3 整合 MQ 构建聊天消息存储系统
  • 板凳-------Mysql cookbook学习 (九)
  • 正则化-深度学习
  • ReactHook有哪些
  • 云原生应用架构设计原则与落地实践:从理念到方法论
  • 漫画Android:事件分发的过程是怎样的?
  • 浏览器的渲染原理
  • 多功能文档处理工具推荐
  • 常见跨域问题解决
  • Go语言接口:灵活多态的核心机制
  • 指数函数的泰勒展开可视化:从数学理论到Python实现
  • 每日c/c++题 备战蓝桥杯(P1011 [NOIP 1998 提高组] 车站)
  • 外贸网站建设费用多少/免费源码资源源码站
  • 杭州的互联网企业/宁波seo推广定制
  • 网站做视频监控方案/上海哪家seo好
  • 做网购网站有哪些/东营优化公司
  • vs网站开发需要的组件/好的seo公司营销网
  • 中国城乡住房建设部网站/下载百度app