<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#app{
width: 300px;
margin: 100px auto;
}
button{
}
</style>
</head>
<body>
<div id="app">
<fieldset>
<legend>登录系统</legend>
<div>
<span>账号：</span>
<input type="text" placeholder="请输入账号" v-model="newPerson.name">
</div>
<div>
<span>密码：</span>
<input type="password" placeholder="请输入密码" v-model="newPerson.pwd">
</div>
<button @click="register()">登录</button>
</fieldset>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
name:123123,
pwd: 'asdasd',
newPerson:{name:'',pwd:''},
},
methods: { // 实例的所有函数实现
register(){
if(this.newPerson.name === '123123'&&this.newPerson.pwd === 'asdasd'){
alert("登录成功");
/*
* 思想：在登录成功并实现跳转后要记住清空登录信息
* */
this.newPerson = {name:'',pwd:''};//这里就是清空信息，
}else{
alert("登录失败");
}
}
}
});
</script>
</body>
</html>
vue.js下简单实现登录
最新推荐文章于 2022-08-24 16:34:04 发布
6845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
