实现原理:
因placeholder内容只在空值状态的时候才显示,所以可以借助:placeholder-shown伪类来判断一个输入框中是否有值。
<template> <div style="padding:30px"> <label for="">短信名称:</label> <input placeholder=" " /> <small></small> <br /> <br /> <label for="">短信内容:</label> <textarea placeholder=" "></textarea> <small></small> </div> </template> <style scoped> textarea:placeholder-shown + small::before, input:placeholder-shown + small::before { content: "不能为空!"; color: red; font-size: 87.5%; } </style>