支付宝、学习强国小程序input、textarea数据双向绑定

前言

vue 的绑定有些区别,需要注意。直接 value="{``{inputValue}}" 是无法双向绑定的。

正确思路

文档说的比较详细,不过没有组合使用的案例,需要自行理解。这里正确的方法是先用 value 绑定数据,再使用 onInput 事件动态修改。

代码如下:

javascript 复制代码
  <textarea value="{{valueTextarea}}" onInput="handleTextarea" ></textarea>
  <input value="{{valueInput}}" onInput="handleInput" />
  Page({
  data: {
    valueTextarea: '',
    valueInput: ''
  },
  // textarea
  handleTextarea: function(e) {
    this.setData({
      valueTextarea: e.detail.value,
    });
  },
  // input
  handleInput: function(e) {
    this.setData({
      valueInput: e.detail.value,
    });
  },
});

支付宝和学习强国都是如此操作,他俩本就一脉相承,相比 vue 确实没有那么方便,但是没有办法。

END

相关推荐
南宫理的日知录7 分钟前
99、Python并发编程:多线程的问题、临界资源以及同步机制
开发语言·python·学习·编程学习
qq229511650223 分钟前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
别拿曾经看以后~33 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
川石课堂软件测试39 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
数据与后端架构提升之路1 小时前
从神经元到神经网络:深度学习的进化之旅
人工智能·神经网络·学习
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
一行11 小时前
电脑蓝屏debug学习
学习·电脑
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
星LZX1 小时前
WireShark入门学习笔记
笔记·学习·wireshark