目录
[1. 区域](#1. 区域)
前言
Vue.js 是一款流行的 JavaScript 框架，用于构建用户界面。它提供了一种简洁的方式来创建可维护和可测试的前端应用程序。Vue.js 的核心库只关注视图层，易于上手，同时与其他库或现有项目整合也非常方便。Vue 也完全能够为复杂的单页应用提供驱动。
在 Vue 3 中，引入了 <script setup> 语法，这是一种更简洁、更快速的方式来编写组件。这种语法使得组件的编写变得更加简单和直观，同时也提高了代码的可读性和维护性。
在这个例子中，我们将使用 Vue 3 和 <script setup> 语法来创建一个简单的搜索组件，展示如何利用 Vue 的响应式系统和计算属性来实现实时搜索功能。
用法
<template>
<div>
<input v-model="searchQuery" placeholder="Search..." />
<ul v-if="filteredData.length > 0">
<li v-for="item in filteredData" :key="item.id">
{{ item.title }} - {{ item.nickname }}
</li>
</ul>
<p v-else>No results found</p>
</div>
</template>
1. <template> 区域
在 <template> 区域中，我们定义了组件的 HTML 结构：
-
一个
input元素，用于输入搜索查询。我们使用v-model指令将其值双向绑定到searchQuery变量。 -
一个
ul列表，用于显示搜索结果。我们使用v-if指令来判断filteredData数组是否有内容，如果有，就显示搜索结果。 -
在
ul列表内部，我们使用v-for指令来遍历filteredData数组，并为每个结果创建一个li元素。 -
如果
<script setup> import { ref, computed } from 'vue';filteredData数组为空，我们显示一条 "No results found" 的消息。const searchQuery = ref('');
const data = ref([
{
"id": 89,
"shopid": 13,
"userid": 21,
"total": "99.00",
"num": "1",
"ord_num": "2023092410299525",
"create_time": "2023-09-24 19:52:47",
"status": 1,
"nickname": "昵称",
"tel": "1527",
"title": "11苹果11双卡全面屏苹果手机",
"price": "99.00",
"info": "推荐购买"
},
{
"id": 88,
"shopid": 13,
"userid": 21,
"total": "99.00",
"num": "1",
"ord_num": "2023092499519710",
"create_time": "2023-09-24 08:48:44",
"status": 1,
"nickname": "昵称",
"tel": "663177",
"title": "11苹果11双卡全面屏苹果手机",
"price": "99.00",
"info": "推荐购买"
},
{
"id": 87,
"shopid": 13,
"userid": 21,
"total": "99.00",
"num": "1",
"ord_num": "2023092497515653",
"create_time": "2023-09-24 08:44:42",
"status": 1,
"nickname": "昵称",
"tel": "1523",
"title": "11苹果11双卡全面屏苹果手机",
"price": "99.00",
"info": "推荐购买"
},
{
"id": 86,
"shopid": 13,
"userid": 21,
"total": "99.00",
"num": "1",
"ord_num": "2023092457100101",
"create_time": "2023-09-24 08:44:41",
"status": 1,
"nickname": "昵称",
"tel": "152366",
"title": "11苹果11双卡全面屏苹果手机",
"price": "99.00",
"info": "推荐购买"
},
{
"id": 85,
"shopid": 13,
"userid": 21,
"total": "99.00",
"num": "1",
"ord_num": "2023092448101101",
"create_time": "2023-09-24 08:40:32",
"status": 1,
"nickname": "昵称",
"tel": "152366",
"title": "11苹果11双卡全面屏苹果手机",
"price": "99.00",
"info": "推荐购买"
},
{
"id": 84,
"shopid": 9,
"userid": 21,
"total": "1",
"num": "1",
"ord_num": "2023092456545351",
"create_time": "2023-09-24 07:53:12",
"status": 1,
"nickname": "昵称",
"tel": "1523677",
"title": "魅鹰视力机德国技术a波光谱眼部按摩仪护眼仪儿童近散眼轴学生",
"price": "1",
"info": "儿童养眼"
},
{
"id": 83,
"shopid": 9,
"userid": 21,
"total": "1",
"num": "1",
"ord_num": "2023092448101545",
"create_time": "2023-09-24 07:44:16",
"status": 1,
"nickname": "昵称",
"tel": "15237",
"title": "魅鹰视力机德国技术a波光谱眼部按摩仪护眼仪儿童近散眼轴学生",
"price": "1",
"info": "儿童养眼"
},
{
"id": 82,
"shopid": 3,
"userid": 2,
"total": "1",
"num": "1",
"ord_num": "2023091456535451",
"create_time": "2023-09-14 14:46:16",
"status": 1,
"nickname": "冰海恋雨",
"tel": "1522599",
"title": "顺丰包邮10斤混合组合混搭新鲜水果进口车厘子礼盒装中秋送礼高端",
"price": "999",
"info": "非常热爆"
},
{
"id": 81,
"shopid": 1,
"userid": 4,
"total": "10",
"num": "1",
"ord_num": "2023091310156515",
"create_time": "2023-09-13 07:46:06",
"status": 1,
"nickname": "李四",
"tel": "15225928720",
"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
"price": "10",
"info": "AJ"
},
{
"id": 80,
"shopid": 1,
"userid": 9,
"total": "10",
"num": "1",
"ord_num": "2023091251571024",
"create_time": "2023-09-12 23:36:03",
"status": 1,
"nickname": "志昂张",
"tel": "17839859856",
"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
"price": "10",
"info": "AJ"
},
{
"id": 79,
"shopid": 1,
"userid": 4,
"total": "10",
"num": "1",
"ord_num": "2023091210297569",
"create_time": "2023-09-12 18:55:59",
"status": 1,
"nickname": "李四",
"tel": "15225928720",
"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
"price": "10",
"info": "AJ"
},
{
"id": 78,
"shopid": 1,
"userid": 4,
"total": "10",
"num": "1",
"ord_num": "2023091249101575",
"create_time": "2023-09-12 18:38:09",
"status": 1,
"nickname": "李四",
"tel": "15225928720",
"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
"price": "10",
"info": "AJ"
},
{
"id": 77,
"shopid": 1,
"userid": 4,
"total": "10",
"num": "1",
"ord_num": "2023091253575549",
"create_time": "2023-09-12 18:37:41",
"status": 1,
"nickname": "李四",
"tel": "15225928720",
"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
"price": "10",
"info": "AJ"
},
{
"id": 76,
"shopid": 1,
"userid": 4,
"total": "10",
"num": "1",
"ord_num": "2023091297971021",
"create_time": "2023-09-12 18:16:58",
"status": 1,
"nickname": "李四",
"tel": "15225928720",
"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
"price": "10",
"info": "AJ"
},
{
"id": 75,
"shopid": 10,
"userid": 4,
"total": "13.8",
"num": "1",
"ord_num": "2023091210255505",
"create_time": "2023-09-12 18:14:55",
"status": 1,
"nickname": "李四",
"tel": "15225928720",
"title": "紫薯新鲜9斤农家蜜薯板栗香红沙地薯地瓜糖心蔬菜山芋小番薯包邮",
"price": "13.8",
"info": "紫薯新鲜9斤农家蜜薯板栗香红沙地薯地瓜糖心蔬菜山芋小番薯包邮"
},
{
"id": 74,
"shopid": 4,
"userid": 4,
"total": "1",
"num": "1",
"ord_num": "2023091210048559",
"create_time": "2023-09-12 18:14:37",
"status": 1,
"nickname": "李四",
"tel": "15225928720",
"title": "正版 华晨宇同款李宁防泼水外套 | 2023秋季新款开衫防风运动服男女款",
"price": "1",
"info": "好穿不贵"
},
{
"id": 73,
"shopid": 1,
"userid": 4,
"total": "10",
"num": "1",
"ord_num": "2023091250501011",
"create_time": "2023-09-12 17:44:18",
"status": 1,
"nickname": "李四",
"tel": "15225928720",
"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
"price": "10",
"info": "AJ"
},
{
"id": 72,
"shopid": 1,
"userid": 4,
"total": "10",
"num": "1",
"ord_num": "2023091210048491",
"create_time": "2023-09-12 17:42:53",
"status": 1,
"nickname": "李四",
"tel": "15225928720",
"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
"price": "10",
"info": "AJ"
}]);
const filteredData = computed(() => {
if (!searchQuery.value) {
return data.value;
}
return data.value.filter(item => {
return Object.values(item).some(value =>
value.toString().toLowerCase().includes(searchQuery.value.toLowerCase())
);
});
});
</script>
2. <script setup> 区域
在 <script setup> 区域中，我们定义了组件的 JavaScript 逻辑：
- 首先，我们从
vue中导入了ref和computed函数。 - 然后，我们定义了
searchQuery变量，用ref函数创建一个响应式引用，并初始化为空字符串。 - 我们还定义了
data变量，用ref函数创建一个响应式引用，并初始化为给定的假数据数组。 - 接下来，我们定义了
filteredData计算属性，它根据searchQuery的值来过滤data数组，并返回匹配的结果。我们使用Object.values(item).some()来检查对象中的所有值是否有任何一个包含搜索字符串。
理解
1. 响应式系统
Vue 的响应式系统是其核心特性之一。在这个例子中，searchQuery 和 data 都是响应式引用，这意味着当它们的值发生变化时，Vue 会自动重新渲染组件。这使得我们能够实现实时搜索功能，用户在输入框中输入时，搜索结果会立即更新。
2. 计算属性
filteredData 是一个计算属性，它依赖于 searchQuery 和 data 的值。当这些依赖项的值发生变化时，Vue 会自动重新计算 filteredData 的值。计算属性是缓存的，只有当其依赖项发生变化时，它们的值才会被重新计算。这使得计算属性非常高效，特别是当进行复杂计算或过滤大量数据时。
3. <script setup> 语法
<script setup> 语法是 Vue 3 中引入的一种新的组件编写方式。它提供了一种更简洁、更快速的方式来定义组件。在 <script setup> 中，我们可以直接定义组件的 props、setup 函数和其他组合式 API，无需使用 export default 来导出组件对象。这种语法使得组件的结构更加清
完整代码
<template>
<div>
<input v-model="searchQuery" placeholder="Search..." />
<ul v-if="filteredData.length > 0">
<li v-for="item in filteredData" :key="item.id">
{{ item.title }} - {{ item.nickname }}
</li>
</ul>
<p v-else>No results found</p>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const searchQuery = ref('');
const data = ref([
{
"id": 89,
"shopid": 13,
"userid": 21,
"total": "99.00",
"num": "1",
"ord_num": "2023092410299525",
"create_time": "2023-09-24 19:52:47",
"status": 1,
"nickname": "昵称",
"tel": "1527",
"title": "11苹果11双卡全面屏苹果手机",
"price": "99.00",
"info": "推荐购买"
},
{
"id": 88,
"shopid": 13,
"userid": 21,
"total": "99.00",
"num": "1",
"ord_num": "2023092499519710",
"create_time": "2023-09-24 08:48:44",
"status": 1,
"nickname": "昵称",
"tel": "15236",
"title": "11苹果11双卡全面屏苹果手机",
"price": "99.00",
"info": "推荐购买"
},
{
"id": 87,
"shopid": 13,
"userid": 21,
"total": "99.00",
"num": "1",
"ord_num": "2023092497515653",
"create_time": "2023-09-24 08:44:42",
"status": 1,
"nickname": "昵称",
"tel": "1577",
"title": "11苹果11双卡全面屏苹果手机",
"price": "99.00",
"info": "推荐购买"
},
{
"id": 86,
"shopid": 13,
"userid": 21,
"total": "99.00",
"num": "1",
"ord_num": "2023092457100101",
"create_time": "2023-09-24 08:44:41",
"status": 1,
"nickname": "昵称",
"tel": "177",
"title": "11苹果11双卡全面屏苹果手机",
"price": "99.00",
"info": "推荐购买"
},
{
"id": 85,
"shopid": 13,
"userid": 21,
"total": "99.00",
"num": "1",
"ord_num": "2023092448101101",
"create_time": "2023-09-24 08:40:32",
"status": 1,
"nickname": "昵称",
"tel": "177",
"title": "11苹果11双卡全面屏苹果手机",
"price": "99.00",
"info": "推荐购买"
},
{
"id": 84,
"shopid": 9,
"userid": 21,
"total": "1",
"num": "1",
"ord_num": "2023092456545351",
"create_time": "2023-09-24 07:53:12",
"status": 1,
"nickname": "昵称",
"tel": "157",
"title": "魅鹰视力机德国技术a波光谱眼部按摩仪护眼仪儿童近散眼轴学生",
"price": "1",
"info": "儿童养眼"
},
{
"id": 83,
"shopid": 9,
"userid": 21,
"total": "1",
"num": "1",
"ord_num": "2023092448101545",
"create_time": "2023-09-24 07:44:16",
"status": 1,
"nickname": "昵称",
"tel": "15",
"title": "魅鹰视力机德国技术a波光谱眼部按摩仪护眼仪儿童近散眼轴学生",
"price": "1",
"info": "儿童养眼"
},
{
"id": 82,
"shopid": 3,
"userid": 2,
"total": "1",
"num": "1",
"ord_num": "2023091456535451",
"create_time": "2023-09-14 14:46:16",
"status": 1,
"nickname": "冰海恋雨",
"tel": "15225928729",
"title": "顺丰包邮10斤混合组合混搭新鲜水果进口车厘子礼盒装中秋送礼高端",
"price": "999",
"info": "非常热爆"
},
{
"id": 81,
"shopid": 1,
"userid": 4,
"total": "10",
"num": "1",
"ord_num": "2023091310156515",
"create_time": "2023-09-13 07:46:06",
"status": 1,
"nickname": "李四",
"tel": "15225928720",
"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
"price": "10",
"info": "AJ"
},
{
"id": 80,
"shopid": 1,
"userid": 9,
"total": "10",
"num": "1",
"ord_num": "2023091251571024",
"create_time": "2023-09-12 23:36:03",
"status": 1,
"nickname": "志昂张",
"tel": "17839859856",
"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
"price": "10",
"info": "AJ"
},
{
"id": 79,
"shopid": 1,
"userid": 4,
"total": "10",
"num": "1",
"ord_num": "2023091210297569",
"create_time": "2023-09-12 18:55:59",
"status": 1,
"nickname": "李四",
"tel": "15225928720",
"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
"price": "10",
"info": "AJ"
},
{
"id": 78,
"shopid": 1,
"userid": 4,
"total": "10",
"num": "1",
"ord_num": "2023091249101575",
"create_time": "2023-09-12 18:38:09",
"status": 1,
"nickname": "李四",
"tel": "15225928720",
"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
"price": "10",
"info": "AJ"
},
{
"id": 77,
"shopid": 1,
"userid": 4,
"total": "10",
"num": "1",
"ord_num": "2023091253575549",
"create_time": "2023-09-12 18:37:41",
"status": 1,
"nickname": "李四",
"tel": "15225928720",
"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
"price": "10",
"info": "AJ"
},
{
"id": 76,
"shopid": 1,
"userid": 4,
"total": "10",
"num": "1",
"ord_num": "2023091297971021",
"create_time": "2023-09-12 18:16:58",
"status": 1,
"nickname": "李四",
"tel": "15225928720",
"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
"price": "10",
"info": "AJ"
},
{
"id": 75,
"shopid": 10,
"userid": 4,
"total": "13.8",
"num": "1",
"ord_num": "2023091210255505",
"create_time": "2023-09-12 18:14:55",
"status": 1,
"nickname": "李四",
"tel": "15225928720",
"title": "紫薯新鲜9斤农家蜜薯板栗香红沙地薯地瓜糖心蔬菜山芋小番薯包邮",
"price": "13.8",
"info": "紫薯新鲜9斤农家蜜薯板栗香红沙地薯地瓜糖心蔬菜山芋小番薯包邮"
},
{
"id": 74,
"shopid": 4,
"userid": 4,
"total": "1",
"num": "1",
"ord_num": "2023091210048559",
"create_time": "2023-09-12 18:14:37",
"status": 1,
"nickname": "李四",
"tel": "15225928720",
"title": "正版 华晨宇同款李宁防泼水外套 | 2023秋季新款开衫防风运动服男女款",
"price": "1",
"info": "好穿不贵"
},
{
"id": 73,
"shopid": 1,
"userid": 4,
"total": "10",
"num": "1",
"ord_num": "2023091250501011",
"create_time": "2023-09-12 17:44:18",
"status": 1,
"nickname": "李四",
"tel": "15225928720",
"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
"price": "10",
"info": "AJ"
},
{
"id": 72,
"shopid": 1,
"userid": 4,
"total": "10",
"num": "1",
"ord_num": "2023091210048491",
"create_time": "2023-09-12 17:42:53",
"status": 1,
"nickname": "李四",
"tel": "15225928720",
"title": "Jordan官方耐克乔丹AJ38男子实战篮球鞋秋新款透气缓震抗扭FN7482",
"price": "10",
"info": "AJ"
}
]);
const filteredData = computed(() => {
if (!searchQuery.value) {
return data.value;
}
return data.value.filter(item => {
return Object.values(item).some(value =>
value.toString().toLowerCase().includes(searchQuery.value.toLowerCase())
);
});
});
</script>