帮我用vue 和css写一个微信通讯录的搜索框，人名为张三，电话为123，

好的，我可以为您提供一个简单的微信通讯录搜索框的实现，代码如下：

<template>
  <div class="search-box">
    <input type="text" class="search-input" v-model="searchText" placeholder="搜索联系人">
    <button class="search-btn" @click="searchContact">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
    }
  },
  methods: {
    searchContact() {
      // 在此处添加联系人搜索的逻辑
      // 可以使用this.searchText获取搜索框中的文本
    },
  },
}
</script>

<style>
.search-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-input {
  width: 200px;
  height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px 0 0 5px;
}

.search-btn {
  width: 60px;
  height: 30px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}
</style>

在上述代码中，我们使用了 Vue.js 和 CSS 实现了一个简单的搜索框。搜索框包含一个文本框和一个搜索按钮，用户可以在文本框中输入联系人的姓名或电话号码，然后点击搜索按钮进行搜索。

您可以在 `searchContact` 方法中添加联系人搜索的逻辑，例如从后台获取联系人数据，然后根据搜索框中的文本进行筛选。