前言
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 元素。
- 如果 filteredData 数组为空,我们显示一条 "No results found" 的消息。
<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": "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>