在uni-app中编写一个登录业务,用户输入姓名密码,点击登录按钮控制台打印用户名和密码
时间: 2024-09-29 14:13:34 浏览: 25
在 UniApp 中编写登录业务,你可以使用 Vue.js 的数据绑定和事件处理机制。首先,创建一个简单的组件结构,包含输入框和登录按钮。这里是一个基本示例:
```html
<template>
<view>
<input v-model="username" placeholder="请输入用户名" />
<input type="password" v-model="password" placeholder="请输入密码" />
<button @click="handleLogin">登录</button>
</view>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
};
},
methods: {
handleLogin() {
console.log('Username:', this.username);
console.log('Password:', '****'); // 由于安全原因,通常不直接显示密码
// 这里可以添加实际的登录逻辑,比如发送请求到服务器验证
},
},
};
</script>
```
在这个例子中:
- `v-model` 是 Vue 的双向数据绑定,用户名和密码会被自动同步到输入框和组件的数据属性。
- `@click` 事件监听器绑定了登录按钮的点击事件,当点击时会触发 `handleLogin` 方法。
- 在 `handleLogin` 方法中,我们打印出当前的用户名和密码(为了安全,密码部分通常显示星号代替真实值)。
注意,这个示例只是一个基础演示,实际应用中你需要考虑用户体验、错误处理以及加密存储密码等安全性问题。