简易模糊搜索

用于搜索商品名

<template>
  <div>
    <input type="text" placeholder="商品名称" v-model="shop_name" />
    <table cellspacing="0">
      <tr class="tableHead">
        <th>编号</th>
        <th>名称</th>
        <th>价格</th>
      </tr>
      <tr class="tableBody" v-for="(item, index) in seach" :key="index">
        <td>{{ item.id }}</td>
        <td>{{ item.goods_name }}</td>
        <td>{{ item.price }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
import dataList from "../assets/data.json";
export default {
  name: "",
  data() {
    return {
      shopList: {},
      shop_name: "",
    };
  },
  props: [], //接收父组件传过来的值
  components: {},
  mounted() {
  
  },
  methods: {},
  computed: {
    seach() {
      var list = dataList.data.filter((item) => {
        return item.goods_name.includes(this.shop_name);
      });
      return list;
    },
  },
  watch: {},
};
</script>
<style scoped>
table {
  width: 1300px;
  border: 1px solid #ddd;
  text-align: center;
}
.tableHead {
  background: rgb(236, 232, 232);
  height: 30px;
}
.tableBody > td {
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}
</style>

效果图如下