帮我用vue 和css写一个类似微信通讯录的界面，把div 换成view

好的，我会帮你实现这个界面。首先，我们需要准备一些数据，比如联系人的信息。假设我们有以下数据：

[
  {
    "id": 1,
    "name": "张三",
    "avatar": "https://via.placeholder.com/50x50",
    "phone": "13333333333"
  },
  {
    "id": 2,
    "name": "李四",
    "avatar": "https://via.placeholder.com/50x50",
    "phone": "14444444444"
  },
  {
    "id": 3,
    "name": "王五",
    "avatar": "https://via.placeholder.com/50x50",
    "phone": "15555555555"
  }
]

接下来，我们可以使用 Vue 和 CSS 实现这个界面。首先，我们需要在 HTML 中定义一个包含联系人列表的容器：

<template>
  <div class="contact-list">
    <div class="contact-item" v-for="contact in contacts" :key="contact.id">
      <div class="avatar">
        <img :src="contact.avatar" alt="">
      </div>
      <div class="info">
        <div class="name">{{ contact.name }}</div>
        <div class="phone">{{ contact.phone }}</div>
      </div>
    </div>
  </div>
</template>

然后，我们可以在 CSS 中为这个容器和联系人列表的每个元素定义样式：

.contact-list {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.contact-item:hover {
  background-color: #f5f5f5;
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
}

.info {
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 16px;
  font-weight: bold;
}

.phone {
  font-size: 14px;
  color: #666;
}

最后，我们需要在 Vue 中引入数据，并将它们渲染到界面中：

<script>
export default {
  data() {
    return {
      contacts: [
        {
          id: 1,
          name: '张三',
          avatar: 'https://via.placeholder.com/50x50',
          phone: '13333333333'
        },
        {
          id: 2,
          name: '李四',
          avatar: 'https://via.placeholder.com/50x50',
          phone: '14444444444'
        },
        {
          id: 3,
          name: '王五',
          avatar: 'https://via.placeholder.com/50x50',
          phone: '15555555555'
        }
      ]
    }
  }
}
</script>

这样，一个类似微信通讯录的界面就完成了。