使用vue简单实现登录注册功能,展示出源码
时间: 2023-08-28 19:03:21 浏览: 46
当然,我会为您提供一个简单的vue登录注册功能演示以及对应的源码:
HTML:
```
<div id="app">
<h1>登录注册功能演示</h1>
<div v-if="!loggedIn">
<h2>登录</h2>
<form>
<label>
用户名:
<input type="text" v-model="username" />
</label>
<br />
<label>
密码:
<input type="password" v-model="password" />
</label>
<br />
<button v-on:click.prevent="login">登录</button>
</form>
<hr />
<h2>注册</h2>
<form>
<label>
用户名:
<input type="text" v-model="newUsername" />
</label>
<br />
<label>
密码:
<input type="password" v-model="newPassword" />
</label>
<br />
<button v-on:click.prevent="register">注册</button>
</form>
</div>
<div v-else>
<h2>欢迎,{{ username }}!</h2>
<button v-on:click="logout">注销</button>
</div>
</div>
```
JS:
```
var app = new Vue({
el: "#app",
data: {
loggedIn: false,
username: "",
password: "",
newUsername: "",
newPassword: ""
},
methods: {
login: function() {
// 这里是登录的逻辑,可以使用ajax向后端发送请求并根据返回的数据判断是否登录成功
if (this.username === "test" && this.password === "123456") {
this.loggedIn = true;
}
},
register: function() {
// 这里是注册的逻辑,可以使用ajax向后端发送请求并根据返回的数据判断是否注册成功
alert("注册成功!");
},
logout: function() {
this.loggedIn = false;
this.username = "";
this.password = "";
this.newUsername = "";
this.newPassword = "";
}
}
});
```
当用户成功登录后,就会进入到 `div v-else` 中,显示欢迎信息和注销按钮,并可以在点击注销按钮时退出登录。
当然,这只是一个简单的示例,实际应用中需要更复杂的逻辑处理,比如对密码进行加密,防止SQL注入等,但大致的实现方式应该与此类似。