uview中只给了一个搜索框的样式 如何实现搜索的效果呢？ 接下来跟着我走吧！
搜索时
未搜索的样子文章来源：https://www.toymoban.com/news/detail-519040.html
说那么多废话都没用，接下来直接上代码！文章来源地址https://www.toymoban.com/news/detail-519040.html
<template>
<view style="padding:30rpx;">
//uview的搜索框
<u-search v-model="keyword" :show-action="false" input-align="center" :clearabled="true" shape="square"
height="80" ></u-search>
</view>
</template>
//这里太长了，自己测试的话可以自己渲染一个数组出来即可，
<view class="container" style="padding:30rpx;background-color:#ffffff;margin-top:0rpx">
<view>
<u-swipe-action>
<u-swipe-action-item :options="options2" @click="click($event,index)"
v-for="(item,index) in rentAccounts_1" :key="index">
<view @click="click2(index)">
<view class="swipe-action u-border-bottom" v-if="item.state=='已创建'">
<view class="swipe-action__content">
<u-row>
<u-col span="6"> <text class="swipe-action__content__text">{{item.num}}</text>
</u-col>
<u-col span="6">
<view class="swipe-action__content__text"
style="text-align: right;color:#B9B9B9">{{item.state}}</view>
</u-col>
</u-row>
</view>
</view>
<view v-else class="swipe-action u-border-bottom">
<view class="swipe-action__content">
<u-row>
<u-col span="6"> <text class="swipe-action__content__text">{{item.num}}</text>
</u-col>
<u-col span="6">
<view class="swipe-action__content__text"
style="text-align: right;color:red">
{{item.state}}
</view>
</u-col>
</u-row>
</view>
</view>
</view>
</u-swipe-action-item>
</u-swipe-action>
</view>
</view>JS
return{
keyword: "", //重要绑定搜索框的内容
//这个就是要搜索的数据了
rentAccounts: [{
id: '1',
num: '101',
state: '已创建',
city:"xx",
}, {
id: '2',
num: '102',
state: '未创建',
city:"xx",
}, {
id: '3',
num: '103',
state: '已创建',
city:"xx",
}, {
id: '4',
num: '104',
state: '未创建',
city:"xx",
}, {
id: '1',
num: '101',
state: '已创建',
},
{
id: '1',
num: '102',
state: '未创建',
city:"xx",
},
{
id: '1',
num: '103',
state: '未创建',
city:"xx",
},
{
id: '1',
num: '104',
state: '已创建',
city:"xx",
},
],
重点就是这里 使用computed计算属性，
computed:{
/这个方法是绑定在上边html 渲染的方法，可以向上查看
rentAccounts_1: function() {
let that = this;
return this.rentAccounts.filter(function(item) { //filter方法过滤掉这个数组
if (that.theCity == "xx") {
if (that.keyword != "") {
return (item.city !== "xx" && item.num == that.keyword) /这个就是重点了，当数组内与条件不相等时筛选出来
} else {
return item.city !== "xx"
}
} else {
if (that.keyword != "") {
return (item.city !== "xx" && item.num == that.keyword)
} else {
return item.city !== "xx"
}
}
})
},
}
好了，内容不易，如果有错误，请多多指教！
到了这里，关于uniapp Uview框架中的搜索（u-search）组件进行搜索的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
