Vue2 搜索框组件代码示例 - 无需文字说明

<template>
  <div class='search-box'>
    <input type='text' v-model='searchValue' @input='handleInput' placeholder='请输入搜索内容'>
    <button @click='handleSearch'>搜索</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      searchValue: ''
    }
  },
  methods: {
    handleInput (e) {
      this.searchValue = e.target.value
    },
    handleSearch () {
      console.log('search value:', this.searchValue)
      // 进行搜索操作
    }
  }
}
</script>
<style scoped>
.search-box {
  display: flex;
  align-items: center;
}
.search-box input {
  flex: 1;
  margin-right: 10px;
  padding: 5px;
  border-radius: 5px;
  outline: none;
}
.search-box button {
  padding: 5px 10px;
  border-radius: 5px;
  border: none;
  background-color: #409EFF;
  color: #fff;
  cursor: pointer;
}
</style>