vue好看的搜索框
时间: 2023-06-30 15:08:04 浏览: 32
以下是一个基于 Vue 的简单搜索框示例:
```html
<template>
<div class="search-box">
<input type="text" v-model="searchTerm" placeholder="Search...">
<button @click="search">Search</button>
</div>
</template>
<script>
export default {
data() {
return {
searchTerm: '',
}
},
methods: {
search() {
// TODO: Perform search operation
console.log(`Searching for ${this.searchTerm}...`)
}
}
}
</script>
<style scoped>
.search-box {
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
}
input[type="text"] {
padding: 10px;
font-size: 16px;
border: none;
border-radius: 5px 0 0 5px;
width: 70%;
}
button {
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 0 5px 5px 0;
cursor: pointer;
width: 30%;
}
</style>
```
你可以根据需要进行样式调整。