input密码框输入后设置显示为星号或其他样式

最新推荐文章于 2025-02-06 10:53:39 发布

weixin_30772105

最新推荐文章于 2025-02-06 10:53:39 发布

阅读量7.3k

点赞数

文章标签： javascript python java ViewUI

原文链接：http://www.cnblogs.com/zuobaiquan01/p/10024435.html

版权

这篇博客展示了如何在Vue中创建一个input密码框，输入后内容以星号显示。作者提供了核心代码示例，并分享了源码及预览地址，方便读者实践和学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

预览效果

核心代码

<div class="text-input" :class="right?'textinput-right':''">
    <span :style="right?{paddingRight:'5px'}:{paddingLeft:'5px'}" v-if="star">{
    {"*".repeat(text.length)}}</span>
    <input
    :type="type=='number'?'tel':'text'"
    ref="inputText"
    :style="[star?'':{paddingLeft:'5px'},right?{textAlign:'right'}:'']"
    :class="['text',className]"
    v-model="value"
    @keyup="handelKeyup"
    :placeholder="text?'':placeholder"
    :maxlength="m