微信小程序input双向数据绑定，解决每一个input都需要bindinput方法

最新推荐文章于 2025-03-12 20:28:32 发布

lenn@wl

最新推荐文章于 2025-03-12 20:28:32 发布

阅读量7k

点赞数

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_44151130/article/details/124649372

版权

微信小程序专栏收录该内容

1 篇文章

订阅专栏

1.通过标签属性data来绑定data中的参数key

2.通过bandinput获取key值

3.通过模板字符串赋值给data中的值

wxml:

 <view class="row">
   <view class="label">产品名称</view>
   <view class="value">
         <input value="{{ goodsName }}" bindinput="bindKeyInput" data-params="goodsName" placeholder='请填写产品名称' placeholder-class='placeholder' />
   </view>
 </view>
 <view class="row">
    <view class="label">产品价格</view>
    <view class="value">
       <input value="{{ goodsPrice }}" type="digit" bindinput="bindKeyInput" data-params="goodsPrice" placeholder='请填写产品价格' placeholder-class='placeholder' />
     </view>
 </view>

js:

data: {
        goodsName:"",
        goodsPrice:"",
},
bindKeyInput(e){
      console.log(e)
    this.setData({
        [`${e.currentTarget.dataset.params}`]:e.detail.value
    })
    console.log(`商品名称：${this.data.goodsName}，商品价格：${this.data.goodsPrice}`)
 },