VUE练手项目 产品搜索框 模糊搜索

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

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

• 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&