首先是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;
}
}
});
转播
