实现导航栏与自定义插件登录页面vue
时间: 2024-01-14 19:03:19 浏览: 32
以下是实现导航栏和自定义插件登录页面的Vue示例:
1. 实现导航栏:
```vue
<template>
<div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</template>
<script>
export default {
name: 'Navbar',
}
</script>
<style scoped>
nav {
background-color: #f2f2f2;
padding: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
margin-right: 10px;
}
a {
text-decoration: none;
color: #333;
}
</style>
```
2. 自定义插件登录页面:
```vue
<template>
<div>
<h1>Login</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" v-model="username">
<br>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password">
<br>
<button @click="login">Login</button>
</form>
</div>
</template>
<script>
export default {
name: 'Login',
data() {
return {
username: '',
password: '',
}
},
methods: {
login() {
// 进行登录逻辑处理
console.log('Username:', this.username);
console.log('Password:', this.password);
}
}
}
</script>
<style scoped>
h1 {
text-align: center;
}
form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
label {
margin-bottom: 10px;
}
input {
padding: 5px;
margin-bottom: 10px;
}
button {
padding: 5px 10px;
}
</style>
```
以上是实现导航栏和自定义插件登录页面的Vue示例。你可以根据需要进行修改和扩展。