微信小程序中的js变量名称灵活运用实现双向绑定-CSDN博客

index.wxml

<view>{{price}}</view>
<form bindsubmit='submit'>
<input bindinput='bindValue' name="price" data-value="price"
></input>
<button form-type='submit' type="primary">提交</button>
<text>\n</text>
总计：{{fee}}
</form>
复制代码

index.js

Page({
  data:{
    price:0,
    fee:0
  },
  bindValue(e){
    var name = e.currentTarget.dataset.value;
    consolo.log(name) //price
    console.log(e.detail.value)   //输入的值
    this.setData({
    //name：e.detail.value这样写的话，就把变量name给写死了，不能动态改变
    //[name]会当name是一个变量，可以动态改变，相当于把name作为属性值，就可以通过对象的形式获取name的值，
      [name]:e.detail.value
      })
  },
  submit(e){
     console.log(e.detail);
    console.log(e.detail.value);
    this.setData({
        //通过对象的形式获取值e.detail.value.price
      fee:e.detail.value.price
    })
  }
}
复制代码

console.log(e.detail);

console.log(e.detail.value);

通过控制台可以知道e.detail.value得到的是一个对象,因为通过[name]的这个变量名称,相当于把name当作键,把e.detail.value当作值,