首先是CSS
*{margin:0;padding:0}
fieldset{
width: 230px;
padding:30px;
margin:100px auto;
}
fieldset p{
line-height: 40px;
}
fieldset label{
font-size: 12px;
color:#bbb;
vertical-align:3px;
}
fieldset input[type="button"]{
padding-left:5px;
padding-right:5px;
}
fieldset span{
width:190px;
padding:5px;
position:absolute;
left:0px;
top:28px;
border: 1px solid #dfb86d;
background-color: #fffde4;
font-size: 12px;
line-height: 20px;
color:#dc9632;
}
#demo{
position:relative;
}
然后是HTML
<fieldset> <form action=""> <p>邮箱:<input type="text"></p> <p>密码:<input type="password" name="" id=""></p> <p id="demo" v-on:mouseenter="visible" @mouseleave="invisible"><input type="checkbox" id="miandenglu"><label for="miandenglu">十天内免登录</label> <span v-show="seen">为了您的信息安全,请不要在网吧或者公用电脑上使用此功能!</span> </p> <p> <input type="button" value="登 录"> <input type="button" value="去注册"> </p> </form> </fieldset>
最后是VUE
var app= new Vue({
el:‘#demo‘,
data:{
seen:false
},
methods:{
visible:function(){
this.seen = true;
},
invisible:function(){
this.seen = false;
}
}
});
原文:https://www.cnblogs.com/banyuege/p/9344753.html