vue.js header

<template>
  <header class="app-header">
    <div class="logo">MyApp</div>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
    <div class="user-info">
      <span v-if="isLoggedIn">Welcome, {{ username }}</span>
      <button v-if="!isLoggedIn" @click="login">Login</button>
    </div>
  </header>
</template>

<script>
export default {
  name: 'AppHeader',
  data() {
    return {
      isLoggedIn: false,
      username: ''
    };
  },
  methods: {
    login() {
      // 登录逻辑
      this.isLoggedIn = true;
      this.username = 'JohnDoe';
    }
  }
};
</script>

<style>
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
}
/* 其他样式 */
</style>