html中的样式:
<div id="view1" class="pt-page" style="border-top: 10px solid #fAfAfA;margin-top: 30px;">
<p id="listInput" @click="choiceGrade">
<label>
报名年纪
</label>
<input type="text" readonly placeholder="请选择报名年纪" v-model="grade" />
</p>
<p id="listInput">
<label>
学生姓名
</label>
<input type="text" placeholder="请输入姓名" v-model="name" />
</p>
<p id="listInput">
<label>
身份证号
</label>
<input type="text" placeholder="请输入身份证号码" v-model="IDcard" />
</p>
<p id="listInput" @click="choiceBirthday">
<label>
出生日期
</label>
<input type="text" readonly placeholder="请选择出生日期" v-model="birthday" />
</p>
<p id="listInput" @click="choiceGender">
<label>
学生性别
</label>
<input type="text" readonly placeholder="请选择学生性别" v-model="gender" />
</p>
<p id="listInput">
<label>
学生户籍
</label>
<input type="text" placeholder="请输入户籍" v-model="household" />
</p>
<p id="listInput">
<label>
填报人
</label>
<input type="text" placeholder="请输入填报人姓名" v-model="filledbyName" />
</p>
<p id="listInput">
<label>
联系电话
</label>
<input type="text" placeholder="请输入联系电话" v-model="filledbyMobile" />
</p>
<button class="nextBtn" @click="next1('#view2')">下一步</button>
</div>
按照需求我们需要在 报名年纪/学生姓名/身份证号之类的表单之前添加必填标识,这里我们采用css实现;
/* 必填项加* */
.pt-page p label.must-fill:before {
content: "*";
font-size: 20px;
color: red;
}
pt-page为外层最大的盒子class名,p为标签,然后使用label点上我们为标签设置好的class名称~