小程序输入数据双向绑定实现方法 - 行业资讯 - 肥雀云

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

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

。　　

很简单,在输入<代码> 上先绑定需要取值的变量,如这个变量名是<代码>名称> data-modal 这个属性值设置为<代码>名称> 输入> 绑定了哪个变量,然后再将输入的<代码>当前值赋给这个变量即可。

wxml 　　　　　　& lt;输入id=懊帧? 　　name="名称" 　　类型='文本' 　　value=' https://www.yisu.com/zixun/{{名称}}' & lt; !——输入从js中的data.name取值——比; 　　data-modal='名字' & lt; !——这里通过data-xx的形式传递一个需要绑定的变量名,之后可以通过event.dataset。xxx轻松取到——比; 　　bindinput=' handleInputChange ' & lt; !——这里绑定输入内容变化时的处理方法——比; 　　比; 　　& lt;/input> 　　　　wxs

　　　　　　页面({ 　　数据:{ 　　名称:字符串　　}, 　　handleInputChange:函数(e) {//取出定义的变量名　　让targetData=https://www.yisu.com/zixun/e.currentTarget.dataset.modal;//取出定义的变量名　　让currentValue=e.detail.value;//将输入值赋值给定义的变量名,this.name可以直接取到在数据中定义值的名称,其效果跟这个[变量名]是对等的,这是js基础　　这[targetData]=currentValue; 　　　　} 　　} 　　　　

效果如下图:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。