vue3+vite动态监听输入框的值增多或减少并计数,输入框绑定的数据为formData:{BZ: ""}
时间: 2023-12-14 20:38:47 浏览: 75
vue遍历生成的输入框 绑定及修改值示例
可以通过 `watchEffect` 监听 `formData.BZ` 的变化,然后在回调函数中统计字符数量。具体代码如下:
```javascript
<template>
<div>
<input v-model="formData.BZ" />
<p>已输入{{ count }}个字符</p>
</div>
</template>
<script>
import { defineComponent, watchEffect } from 'vue'
export default defineComponent({
setup() {
const formData = {
BZ: ''
}
let count = 0
watchEffect(() => {
count = formData.BZ.length
})
return {
formData,
count
}
}
})
</script>
```
这里使用了 `watchEffect` 来监听 `formData.BZ` 的变化,每次变化时将字符数赋值给 `count`,然后在模板中显示即可。
阅读全文