上述代码用vue3实现
时间: 2023-07-18 07:21:03 浏览: 43
好的,下面是使用Vue 3实现的登录界面代码示例,同样使用了Bootstrap样式:
```html
<template>
<div class="container mt-5">
<div class="card">
<div class="card-header">
<h4 class="text-center">Login</h4>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" placeholder="Enter username" v-model="username">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" id="password" placeholder="Enter password" v-model="password">
</div>
<button type="submit" class="btn btn-primary btn-block" @click.prevent="login()">Login</button>
</form>
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
name: 'Login',
setup() {
const username = ref('');
const password = ref('');
const login = () => {
console.log(`Username: ${username.value}, Password: ${password.value}`);
// Here you can add your login logic
};
return {
username,
password,
login
}
}
}
</script>
<style>
.card {
max-width: 400px;
margin: 0 auto;
}
</style>
```
这个登录界面同样使用了Bootstrap的样式,但是使用了Vue 3的Composition API来管理组件的逻辑。界面中包含一个标题、一个用户名输入框、一个密码输入框和一个登录按钮。用户名和密码通过ref定义为响应式变量,并且绑定到对应的输入框中。登录按钮绑定了一个事件,当用户点击按钮时,会执行login函数,该函数可以根据需要添加登录逻辑。最终,界面会将用户名和密码输出到控制台。