对于el-input，直接显示输入长度提示并上色并不直接支持，但我们可以用一些技巧来模拟这一效果。而对于el-textarea，虽然它没有直接的计数提示，但可以通过类似的技巧添加。

对于el-input

<template><div class="input-with-counter"><el-inputv-model="inputValue":maxlength="10"placeholder="请输入内容"></el-input><span class="counter red-counter">{{ inputValue.length }}/10</span></div>
</template><style scoped>
.input-with-counter {display: inline-block;position: relative;
}.counter {position: absolute;right: 0;bottom: 0;color: red; /* 默认红色 */
}.red-counter {color: red;
}
</style><script>
export default {data() {return {inputValue: '',};},
};
</script>

对于el-textarea

<template><div class="textarea-with-counter"><el-textareav-model="textareaValue":rows="4":maxlength="100"placeholder="请输入内容"></el-textarea><span class="counter red-counter">{{ textareaValue.length }}/100</span></div>
</template><style scoped>
.textarea-with-counter {position: relative;
}.counter {position: absolute;bottom: -20px; /* 调整位置使其位于textarea下方 */right: 0;color: red; /* 默认红色 */
}
</style><script>
export default {data() {return {textareaValue: '',};},
};
</script>