vue个人信息页面 代码实现

以下是一个简单的个人信息页面的Vue代码实现，包括基本的HTML、CSS和Vue组件。

HTML代码：

<div id="app">
  <h1>个人信息</h1>
  <div class="info">
    <img :src="avatar" alt="头像">
    <div class="details">
      <h2>{{ name }}</h2>
      <p>{{ age }}岁</p>
      <p>{{ gender }}</p>
      <p>{{ email }}</p>
      <p>{{ phone }}</p>
      <p>{{ address }}</p>
    </div>
  </div>
</div>

CSS代码：

#app {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

.info {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-right: 30px;
}

h2 {
  margin-top: 0;
}

p {
  margin-bottom: 5px;
}

Vue组件代码：

Vue.component('personal-info', {
  props: {
    name: String,
    age: Number,
    gender: String,
    email: String,
    phone: String,
    address: String,
    avatar: String
  },
  template: `
    <div class="info">
      <img :src="avatar" alt="头像">
      <div class="details">
        <h2>{{ name }}</h2>
        <p>{{ age }}岁</p>
        <p>{{ gender }}</p>
        <p>{{ email }}</p>
        <p>{{ phone }}</p>
        <p>{{ address }}</p>
      </div>
    </div>
  `
});

new Vue({
  el: '#app',
  data: {
    name: '张三',
    age: 25,
    gender: '男',
    email: 'zhangsan@example.com',
    phone: '13812345678',
    address: '北京市海淀区',
    avatar: 'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50'
  }
});

在上述代码中，我们定义了一个名为personal-info的Vue组件，它接受一些属性作为个人信息的数据。在Vue实例中，我们将这些属性传递给personal-info组件，并在页面上显示。其中，头像图片链接使用了Gravatar服务，该服务可以根据用户的邮箱地址生成唯一的头像图片链接。