假设下方数据是我们从接口中获取到的,我们需要通过name来搜索,好我们看下一步。
data: [{
"id": 30,
"category_id": 3,
"name": "日常家居名称",
"goods_num": 20,
"integral_num": 20,
"saleable": 1,
"content": "内容描述"
},
{
"id": 29,
"category_id": 3,
"name": "日常家居名称",
"goods_num": 20,
"integral_num": 20,
"saleable": 1,
"content": "内容描述"
},
{
"id": 28,
"category_id": 3,
"name": "日常家居名称",
"goods_num": 20,
"integral_num": 20,
"saleable": 1,
"content": "内容描述"
},
{
"id": 27,
"category_id": 3,
"name": "日常家居名称",
"goods_num": 20,
"integral_num": 20,
"saleable": 1,
"content": "内容描述"
},
{
"id": 26,
"category_id": 3,
"name": "日常家居名称",
"goods_num": 20,
"integral_num": 20,
"saleable": 1,
"content": "内容描述"
},
{
"id": 25,
"category_id": 3,
"name": "日常家居名称",
"goods_num": 20,
"integral_num": 20,
"saleable": 1,
"content": "内容描述"
},
{
"id": 24,
"category_id": 3,
"name": "日常家居名称",
"goods_num": 20,
"integral_num": 20,
"saleable": 1,
"content": "内容描述"
},
{
"id": 23,
"category_id": 3,
"name": "日常家居名称",
"goods_num": 20,
"integral_num": 20,
"saleable": 1,
"content": "内容描述"
},
{
"id": 22,
"category_id": 3,
"name": "日常家居名称",
"goods_num": 20,
"integral_num": 20,
"saleable": 1,
"content": "内容描述"
},
{
"id": 20,
"category_id": 2,
"name": "数码家电名称",
"goods_num": 20,
"integral_num": 20,
"saleable": 1,
"content": "述数码家电内容描述"
},
{
"id": 19,
"category_id": 2,
"name": "数码家电名称",
"goods_num": 20,
"integral_num": 20,
"saleable": 1,
"content": "述数码家电内容描述"
},
{
"id": 18,
"category_id": 2,
"name": "数码家电名称",
"goods_num": 20,
"integral_num": 20,
"saleable": 1,
"content": "述数码家电内容描述"
}
],
部分:这是模板部分,用于定义页面的结构和布局。在这里,您定义了一个搜索框组件
和一个用于显示搜索结果的
元素。
组件:这是一个自定义的搜索框组件,可以在页面上显示一个搜索框。它具有一些属性,例如 style
、height
和 class
,用于自定义样式,以及 placeholder
属性,用于设置搜索框的占位符文本。@input
事件监听器绑定到 search
方法,以在用户输入时触发搜索。
元素:这是一个 UniApp 中用于布局的视图容器元素。在这里,它用于包装搜索框和搜索结果。
{{ item.name }}
部分:这是脚本部分,包含了页面的逻辑和数据。在这里,您定义了一个名为
data
的数据对象,用于存储产品数据、searchKeyword
用于保存搜索关键词。接下来,使用 computed
计算属性定义了 filteredData
,该属性根据搜索关键词过滤产品数据。
methods
部分:在这里,您定义了一个名为 search
的方法,用于更新 searchKeyword
,以便触发计算属性 filteredData
的重新计算,从而实现搜索功能。
searchKeyword: '', // 用于保存搜索关键词
computed: {
// 使用计算属性来过滤数据
filteredData() {
return this.data.filter(item => {
// 这里可以根据您的需求定义搜索规则
return item.name.includes(this.searchKeyword); // 这里示例使用名称字段进行搜索
});
},
},
methods: {
search(keyword) {
// 更新搜索关键词
this.searchKeyword = keyword;
},
},
好这样一个搜索就完毕了
下方是页面全部代码cv直接可以查看效果
{{ item.name }}