小程序记：input双向数据绑定

客官°小女子只卖身不卖艺 2024-04-18 19:57 85阅读 0赞

长时间使用VUE，发现v-model确实很好用，用了小程序之后，才发现小程序的双向绑定那么难用，必须有个bindinput来触发改变值。

经过研究发现，小程序的双向绑定也可以实现，但是稍复杂点，思路和大家说一下，最后附代码：

1、利用bindinput来触发改变

2、利用data-name来绑定获取的数据

3、bindinput触发时利用event获取，name的值，然后用this.setData改变data-name绑定的参数。

4、利用data-name中间属性来动态指定对象还是非对象，入data-name="login"或data-name="login.username"，这样可以根据中间有没有.来判断是对象还是直接参数

5、将方法拆出来，动态引入，哪个页面用引入到哪个页面

代码如下：

![70][]

module.exports = \{

inputgetName(e)\{

let name = e.currentTarget.dataset.name;

let nameMap = \{\}

if(name.indexOf('.'))\{

let nameList = name.split('.')

if(this.data\[nameList\[0\]\])\{

nameMap\[nameList\[0\]\] = this.data\[nameList\[0\]\]

\}else\{

nameMap\[nameList\[0\]\] = \{\}

\}

nameMap\[nameList\[0\]\]\[nameList\[1\]\] = e.detail.value

\}else\{

nameMap\[name\] = e.detail.value

\}

console.log(nameMap)

this.setData(nameMap)

\}

\}

![70 1][]

const successService = require('../../request/successService.js')

var commonMixin = require('../../mixins/commonMixin')

Page(Object.assign(\{

/\*\*

\* 页面的初始数据

\*/

data: \{

login:\{\}

\},

formSubmit (e) \{// 提交

// console.log('form发生了submit事件，携带数据为：', e.detail.value)

console.log(this.data.login)

console.log(e)

wx.switchTab(\{

url: '../index/index'

\})

\},

/\*\*

\* 用户点击右上角分享

\*/

onShareAppMessage: function () \{

console.log('分享')

\}

\},commonMixin))

使用时：

<input type='number' placeholder='请输入用户名' maxlength="11" bindinput="inputgetName" data-name='login.username' value='\{ \{login.username\}\}'/>

动态的是这个地方：bindinput="inputgetName" data-name='login.username'，bindinput触发改变，data-name传入动态参数

[70]: https://img-blog.csdn.net/2018081316285872?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpemhlbl9zb2Z0d2FyZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/2018081316294199?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpemhlbl9zb2Z0d2FyZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

发表评论取消回复

表情：

评论列表（有 0 条评论，85人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序记：input双向数据绑定

时间使用VUE，发现v-model确实很好用，用了小程序之后，才发现小程序的双向绑定那么难用，必须有个bindinput来触发改变值。经过研究发现，小程序的双向绑定也...

客官°小女子只卖身不卖艺/ 2024年04月18日 19:57/ 0 赞/ 86 阅读

相关 22 双向数据绑定 input、textarea、checkbox、radio

学会学习的人，是幸福的人梦想不会因为成长而离开你，也不会被社会的压力所击倒，梦想是被自己的借口所一步步慢慢吞噬直到平庸。 \[基础\]Vue表单的双向数据绑定-1

拼搏现实的明天。/ 2023年10月06日 20:33/ 0 赞/ 11 阅读

相关微信小程序前端开发实现双向数据绑定

现在公司有一个要求要实现这样的一个功能： ![20191008174208937.gif][] 先来看html代码： ![watermark_type_ZmFuZ3poZ

约定不等于承诺〃/ 2023年06月05日 08:18/ 0 赞/ 3 阅读

相关微信小程序双向数据绑定,父子传参

单向绑定语法 1.普通的属性的绑定是单向的。例如： <input value="{ {value}}" /> 解析： > 如果使用 `this.setDat

阳光穿透心脏的1/2处/ 2022年12月29日 00:30/ 0 赞/ 161 阅读

相关微信小程序 - input 实现双向数据绑定（实时更新数据变化）

前言 > 我们知道，`Vue` 项目实现双向绑定很轻松，但在小程序项目中却不能如此简单的实现。在微信小程序中，需要借助 `input` 组件的 `bindinput`

喜欢ヅ旅行/ 2022年11月28日 10:53/ 0 赞/ 988 阅读

相关 react数据双向绑定

1，page页面 import React, { PureComponent } from 'react'; import { findDOMNode } f

待我称王封你为后i/ 2022年04月04日 12:38/ 0 赞/ 323 阅读

相关 React双向数据绑定

React双向数据绑定前言：React中的双向绑定是没有提供的，相比vue需要手动写，不过也比较简单，下面看代码示例。什么是双向数据绑定？ PS：m

今天药忘吃喽~/ 2021年09月29日 02:48/ 0 赞/ 433 阅读

相关 4、vue.js input双向数据绑定监听input

HTML 代码部分 <div id="div_id"> <input v-model="name" placeholder="名称"> </div>

蔚落/ 2021年08月28日 16:26/ 0 赞/ 312 阅读

相关微信小程序如何实现input双向绑定

微信小程序本身只可以进行单向绑定，从js到html的绑定可以进行响应，但是html到js是不能响应的我们在html中使用input标签进行信息的填写，同时我们希望在对应的j

旧城等待，/ 2021年08月13日 23:27/ 0 赞/ 685 阅读

相关 render input 双向绑定

有时候我们需要自定义表格列展示，需要用render，对于render内容列input的双向绑定方法： render: (h, params) => {

我不是女神ヾ/ 2021年08月13日 20:18/ 0 赞/ 687 阅读