uniapp+vue3监听输入框内容watch

耶啵奶膘

已于 2024-04-16 12:30:57 修改

阅读量487

点赞数 4

分类专栏： uni、vue 文章标签： uni-app vue.js javascript

于 2024-04-16 12:30:16 首次发布

本文链接：https://blog.csdn.net/xulihua_75/article/details/137820290

版权

uni、vue 专栏收录该内容

125 篇文章 7 订阅

订阅专栏

代码

<view class="searchBox">
	<view class="searchLeft">
		<wh-icon name="search" size="40"></wh-icon>
		<input type="text" placeholder="请输入搜索内容" v-model="search" />
	</view>
	<view class="searchBtn" @click="searchSchool">搜索</view>
</view>

import {
	ref,
	watch,
} from "vue";
const search = ref('') //搜索内容
watch(search, (newValue) => {
	if (!newValue) {
	    getSchoolLists()
	}
})
function searchSchool() {
	getSchoolLists()
}

.searchBox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80rpx;
	background: #f8f8f8;
	border-radius: 50rpx;
	padding: 0 20rpx;
	margin: 0 30rpx;

	.searchLeft {
		display: flex;
		align-items: center;
		width: 100%;

		input {
			text-align: left;
			font-size: 26rpx;
			border-radius: 0;
			margin-left: 10rpx;
			width: 70%;
		}
	}

	.searchBtn {
		font-size: 28rpx;
		color: #757575;
		flex-shrink: 0;
	}
}