VUE练手项目产品搜索框模糊搜索_模糊搜索商品-优快云博客

本文链接：https://blog.youkuaiyun.com/RacheKs/article/details/113363711

基于Vue的项目实践，改写自React官方文档。功能包括：仅显示库存商品选项，用户可选择是否仅查看有库存的产品；提供搜索框进行产品名称的模糊搜索，回车触发搜索；产品列表展示商品的name和price，未库存商品name标红，并按分类排序。附带json数据及效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目来源：react官方文档实例，用vue改写
项目要求：

only show products in stock 如果不选中, 则展示所有的商品; 如果选择, 则展示 stocked:
true的商品List item
搜索框, 输入关键字可以根据name进行模糊搜索; 例如搜索 Pod, 可以搜索出 iPod Touch; 当用户按回车键时,进行搜索
列表: 展示产品

name 列, 如果该商品 stocked: false 则名字需要标红
price 列, 展示价格;
列表展示需要按照分类展示; 如上图中所示; tip: 注意处理的方式
默认展示所有数据
json数据：

[
  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];

效果图
在这里插入图片描述
only show products in stock功能

模糊搜索

模糊搜索

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.js"></script>
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <div>
      <input v-model=" searchVal " placeholder="请搜索">
      <!--      <input v-model="message" placeholder="edit me">-->
      <p>Search is: {
   {
    searchVal }}</p>
      <p><input type="checkbox" v-model="checked">Only show products in stock</p>
    </div>

    <div id="goods"