el-input组件当数据为空时， 边框变红，并提示错误信息

本文主要是介绍el-input组件当数据为空时， 边框变红，并提示错误信息，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1，样式

初始：

当不输入口令， 点击确定时：

2, 思路

主要是使用动态类的方式。
先设置输入框变红的样式以及提示文字的样式class
对于样式class 用变量来控制是否奏效。

3， 代码实现

//html：
<div class="input"><el-inputv-model="password"ref="passwordRef"placeholder="请输入操作口令"type="password"size="small":class="{'password' : errorVerify}"></el-input><span class="error" :style="{'display': errorVerify ? 'inline' : 'none'}">请输入操作口令</span></div><span slot="footer" class="dialog-footer"><el-button @click="handleClose">取 消</el-button><el-button type="primary" @click="confirm">确 定</el-button></span>// js：confirm(){if(!this.password) {this.errorVerify = truereturn}this.errorVerify = false}// css:.password /deep/ input {border-color: #f56c6c; 
}}
.error {color: red;font-size: 10px;padding-left: 5px;
}   

这篇关于el-input组件当数据为空时， 边框变红，并提示错误信息的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---