用vue写一个登录的表单
时间: 2023-02-09 22:50:14 浏览: 69
下面是一个简单的登录表单示例,使用Vue.js实现:
```
<template>
<div>
<form>
<label>
用户名:
<input v-model="username" type="text" placeholder="请输入用户名" />
</label>
<br />
<label>
密码:
<input v-model="password" type="password" placeholder="请输入密码" />
</label>
<br />
<button @click="handleLogin">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
handleLogin() {
// 在这里处理登录逻辑
console.log(`用户名:${this.username},密码:${this.password}`)
}
}
}
</script>
```
在上面的示例中,我们使用了 Vue.js 的 v-model 指令来绑定输入框和数据,点击登录按钮时触发 handleLogin 方法,在 handleLogin 方法中处理登录逻辑。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)