申请注册网站,中山建设局网站首页,网站备案密码重置,网站404页面制作前言
Vue.js 是一款流行的 JavaScript 框架#xff0c;用于构建用户界面。它提供了一种简洁的方式来创建可维护和可测试的前端应用程序。Vue.js 的核心库只关注视图层#xff0c;易于上手#xff0c;同时与其他库或现有项目整合也非常方便。Vue 也完全能够为复杂的单页应用…前言
Vue.js 是一款流行的 JavaScript 框架用于构建用户界面。它提供了一种简洁的方式来创建可维护和可测试的前端应用程序。Vue.js 的核心库只关注视图层易于上手同时与其他库或现有项目整合也非常方便。Vue 也完全能够为复杂的单页应用提供驱动。
在 Vue 3 中引入了 script setup 语法这是一种更简洁、更快速的方式来编写组件。这种语法使得组件的编写变得更加简单和直观同时也提高了代码的可读性和维护性。
在这个例子中我们将使用 Vue 3 和 script setup 语法来创建一个简单的搜索组件展示如何利用 Vue 的响应式系统和计算属性来实现实时搜索功能。
用法
templatedivinput v-modelsearchQuery placeholderSearch... /ul v-iffilteredData.length 0li v-foritem in filteredData :keyitem.id{{ item.title }} - {{ item.nickname }}/li/ulp v-elseNo 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 来导出组件对象。这种语法使得组件的结构更加清
完整代码
templatedivinput v-modelsearchQuery placeholderSearch... /ul v-iffilteredData.length 0li v-foritem in filteredData :keyitem.id{{ item.title }} - {{ item.nickname }}/li/ulp v-elseNo results found/p/div
/templatescript 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
