我想写一个移动端列表列表带搜索输入框，界面好看的组件

好的，下面是一个简单的移动端列表搜索组件的实现，你可以根据需要进行修改和扩展：

<template>
  <div class="list-search">
    <div class="search-box">
      <input type="text" v-model="keyword" placeholder="Search...">
      <button @click="search">Search</button>
    </div>
    <ul class="list">
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    items: { type: Array, required: true }
  },
  data() {
    return {
      keyword: ''
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        return item.name.indexOf(this.keyword) !== -1
      })
    }
  },
  methods: {
    search() {
      // 触发搜索事件，将关键字传递给父组件
      this.$emit('search', this.keyword)
    }
  }
}
</script>

<style scoped>
.list-search {
  padding: 10px;
}

.search-box {
  display: flex;
  align-items: center;
}

.search-box input {
  flex: 1;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.search-box button {
  margin-left: 10px;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  background-color: #00bcd4;
  color: #fff;
  border: none;
  border-radius: 5px;
}

.list {
  margin-top: 10px;
  list-style: none;
  padding: 0;
}

.list li {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
  margin-bottom: 10px;
}
</style>

在上面的代码中，我们定义了一个列表搜索组件，包含了一个搜索框和一个列表。其中，`items` 是必需的属性，表示要显示的列表数据；`keyword` 是搜索关键字，用户输入后会触发搜索事件，将关键字传递给父组件。

通过计算属性 `filteredItems`，我们可以根据 `keyword` 进行筛选，只显示匹配关键字的列表项。在界面上，我们使用了 Flex 布局和圆角边框样式，使组件更加美观和易用。

你可以将上面的代码保存为一个单独的 Vue.js 组件，例如 `ListSearch.vue`，并在你的项目中使用它。例如：

<template>
  <div>
    <list-search :items="items" @search="onSearch"></list-search>
  </div>
</template>

<script>
import ListSearch from './ListSearch.vue'

export default {
  components: {
    ListSearch
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' },
        { id: 4, name: 'Grape' },
        { id: 5, name: 'Kiwi' }
      ]
    }
  },
  methods: {
    onSearch(keyword) {
      // 处理搜索事件，根据关键字过滤列表数据
      console.log('Search:', keyword)
    }
  }
}
</script>

在上面的代码中，我们在父组件中使用了 `ListSearch` 组件，并将列表数据通过 `items` 属性传递给它。当用户输入关键字后，`ListSearch` 组件会触发 `search` 事件，并将关键字传递给父组件的 `onSearch` 方法进行处理。

这样，你就可以快速地实现一个移动端列表搜索组件了，希望对你有所帮助。