官方推荐input事件获取内容方式:
<template>
<view>
<input type="number" placeholder="请输入" @input="onInput" />
</view>
</template>
<script>
export default {
data() {
return {
number: 0
}
},
methods: {
onInput(e) {
// 【不用v-model绑定表单,直接时间获取值】这种方式是uni-app官方的方式,测试结果正确!
console.log(e.detail)
this.number = e.detail
}
}
}
</script>
<style>
</style>
input事件的三种用法【传统Vue的玩法这里不好使】
<template>
<view>
test
<input type="number" placeholder="请输入" @input="onInput" v-model="number" />
</view>
</template>
<script>
export default {
data() {
return {
number: 0
}
},
methods: {
onInput(e) {
// 传入的Vue是没问题的,但是uni-app会延时,导致输入的结果和打印的结果有时间误差,不一致!
console.log(this.number)
// uni-app框架官方说明:input事件处理函数内实时修改当前值不生效,可以延迟设置!
// 延时的结果,输入的结果和打印的结果一致!
setTimeout(() => { console.log(this.number) }, 0)
// 这种方式是uni-app官方的方式,测试结果正确!
console.log(e.detail)
}
}
}
</script>
<style>
</style>