如果我想在多行输入框下方显示已输入的字数,怎么做?
时间: 2024-10-28 15:06:30 浏览: 10
在U-form中,要在多行输入框下方实时显示输入的字数,你可以结合Vue的计算属性(Computed Property)和`v-model`一起使用。首先,在模板上添加一个计算的字段作为字数显示:
```html
<u-form>
<u-form-item label="多行输入">
<u-textarea v-model="inputValue" :rows="4" @input="updateCharCount"></u-textarea>
<span>共 {{ computedChars }} 字</span>
</u-form-item>
</u-form>
<script>
export default {
data() {
return {
inputValue: '',
};
},
computed: {
computedChars() {
return this.inputValue.replace(/\r/g, '').replace(/\n/g, '').length;
},
},
methods: {
updateCharCount(e) {
// 每次输入或删除文字时触发此方法更新计数
this.computedChars = e.target.value.replace(/\r/g, '').replace(/\n/g, '').length;
},
},
};
</script>
```
这里,`computedChars`计算属性会在每次`input`事件触发时,去除换行符并计算当前输入的字符数。然后将结果显示在指定的位置,通常是`<span>`标签内。
阅读全文