vue实时监听每一个textarea文本框输入的字数
时间: 2024-04-30 21:20:10 浏览: 90
VUE监控textarea输入的字符数量
你可以使用 `v-model` 指令和 `watch` 属性来实现监听每一个 textarea 文本框输入的字数。具体步骤如下:
1. 在 textarea 中使用 `v-model` 指令双向绑定文本框中的值,同时设置一个名为 `textLength` 的变量来存储当前文本框中文字的长度。
```
<textarea v-model="content"></textarea>
```
2. 在 Vue 实例中使用 `watch` 属性来监听 `content` 变量的变化,每当 `content` 变化时,使用 `length` 属性计算出当前文本框中文字的长度,将其赋值给 `textLength` 变量。
```
data() {
return {
content: '',
textLength: 0
}
},
watch: {
content: function(newVal, oldVal) {
this.textLength = newVal.length;
}
}
```
3. 最后,在模板中展示 `textLength` 变量即可。
```
<p>当前输入了{{ textLength }}个字</p>
```
阅读全文