微信小程序 input双向数据绑定

分享一个

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

这样写的好处就是 我只用在js文件里 写上 下面这个函数
需要双向数据绑定的时候直接在 input标签上写上
bindinput=“vmodel” data-value=“phone” 就好了 // 备注:phone 就是你要绑定的变量

//wxml部分
<input type="text" value="{{phone}}"
 bindinput="vmodel" data-value="phone"  // 就是这一行了
 placeholder="请输入联系电话" 
 placeholder-class="placeholder-input"/>

js部分
data:{
  phone:''
}
vmodel(e) {
  this.setData({
    [e.currentTarget.dataset.value]:e.detail.value
    /**
    * e.currentTarget.dataset.value 拿到我要改变的数据 input 
    * e.detail.value 拿到 我改变以后的值
    */
  })
}

这里还有一个更改input 默认提示文字的颜色

placeholder-class=“placeholder-input”

//在css里
.placeholder-input{
	color:red;
}

长安点赞,一键三连,不好看不要钱