VUE鼠标移上去提示功能类似hover

Posted 2020-12-05 banyuege

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