方法①
小程序数据是单向的,当我们在输入时都要重新去setData这个输入的值,如果输入框很多我们可以定义一个通用的方法去获取
html
<view>
<input placeholder='用户名' value='{{username}}' bindinput='changeInput' data-prop='username'></input>
<input placeholder='密码' value='{{password}}' bindinput='changeInput' data-prop='password'></input>
</view>
对象的动态属性不能用.获取 要用[]获取
js
Page({
data: {
username: '',
password: ''
},
changeInput(e){
let changed = {};
let prop = e.currentTarget.dataset.prop
changed[prop] = e.detail.value;
this.setData(changed)
}
})
方法②
通过提交表单的方式获取输入值
html
<view>
<!-- 绑定提交表单的方法 -->
<form bindsubmit='formSubmit'>
<!-- 通过name属性可以获取表单输入的值 -->
<input placeholder='用户名' value='{{username}}' name='username'></input>
<input placeholder='密码' value='{{password}}' name='password'></input>
<!-- form-type='submit'表示这个按钮是表单的提交按钮 -->
<button form-type='submit'>提交</button>
</form>
</view>
Page({
data: {
username: '',
password: ''
},
formSubmit(e){
// e.detail.value对象中可以获取表单输入额值
console.log(e.detal.value)
}
})