前端使用vue3的setup实现微博同款搜索框并且有漂亮的背景
时间: 2024-04-29 10:24:07 浏览: 77
以下是一个使用Vue3的setup函数实现微博同款搜索框并且有漂亮背景的示例代码:
```html
<template>
<div class="search-container">
<div class="search-box">
<i class="iconfont icon-search"></i>
<input type="text" placeholder="搜索微博">
</div>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const searchValue = ref('')
const handleSearch = (e) => {
searchValue.value = e.target.value
}
return {
searchValue,
handleSearch
}
}
}
</script>
<style>
.search-container {
background-color: #f5f5f5;
padding: 20px;
}
.search-box {
display: flex;
align-items: center;
background-color: #fff;
border-radius: 20px;
padding: 10px;
}
.search-box i {
font-size: 20px;
color: #999;
margin-right: 10px;
}
</style>
```
在上面的代码中,我们使用了Vue3的`ref`函数来创建响应式的`searchValue`变量,在`handleSearch`函数中将输入框的值赋值给`searchValue`,从而实现搜索框的双向绑定。同时,我们也使用了一些CSS样式来实现搜索框的漂亮背景。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241231044955.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)