vue3 setup语法糖 搜索

锅盖哒2023-10-26 21:26

目录

前言

用法

[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 元素。

  • 如果 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>
相关推荐
你挚爱的强哥7 分钟前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森42 分钟前
CSS3中的伸缩盒模型（弹性盒子、弹性布局）之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy42 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex，2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏（补充上一条）
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
天天进步20153 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript？应该注意那些点？
前端·vue.js·typescript
热门推荐
01ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04【音视频 | opus】opus编解码库(opus-1.4)详细介绍以及使用——附带解码示例代码05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07IT专业入门，高考假期预习指南08玄机平台应急响应—webshell查杀09Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO10〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇