小程序输入数据双向绑定的实现方法

我们都知道modal可以在vue中使用，实现输入内容数据的双向绑定。

小程序好像没有提供相应的方法支持，需要我们自己写。

原则

很简单，先绑定需要在输入时取值的变量，比如变量名是name，然后定义一个指向变量名的属性data-modal。如果在input的绑定方法中取出属性值，就知道input绑定了哪个变量，然后将input的当前值赋给这个变量。

实现

页面结构

输入id=' name ' name=' name ' type=' text ' value=' { { name } } '！- input从js-data-modal=' name '中的data.name中获取值！-这里，需要绑定的变量名是以data-xx的形式传递的，可以通过event . dataset . XXX-bind input=' handleInputChange '！-这里，绑定输入内容发生变化时的处理方法-/input xs

page({ data : { name : string }，handleinputchange:函数(e){//取出定义的变量名lettargetdata=e . current target . dataset . modal；//取出定义的变量名让currentValue=e . detail . value；//将输入值赋给定义好的变量名，this.name可以直接得到数据中定义的名字值，其效果等同于这个[变量名]，这是js this[targetData]=currentValue的基础；}}效果如下：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。