我想在Vue.JS中包含搜索栏。我对Vue很陌生。我需要在前端过滤数据。当我在脚本部分获得数据时，我如何过滤它？

下面是我的代码：

<代码><；模板>；<；细分（>；）<；DIV类="；搜索-包装面板-标题COL-SM-12"；>；<；输入类型="；文本"；V-model="；搜索"；PLACEHOLDER="；搜索"；/>；<；br/>；<；br/>；<；/DIV>；<；表类="；表"；ID="；我表格"；>；<；头（>；）<；TR>；<；th>；ID<；/TH>；<；th>；名称<；/TH>；<；th>；类别<；/TH>；<；th>；数量<；/th>；<；th>；状态<；/TH>；<；/tr>；<；/thead>；<；正文（>；）<；tr V-for="；产品中的产品"；：key="；产品ID"；>；<；TD>；{{product.ID}}<；/TD>；<；TD>；{{产品名称}}<；/TD>；<；TD>；{{产品类别}}<；/TD>；<；TD>；{{产品数量}}<；/TD>；<；TD>；{{产品状态}}<；/TD>；<；/tr>；<；/t正文>；<；/表格>；<；/DIV>；<；/模板>；<；脚本>；导出默认{数据（）{返回{产品：[]};}};<；/脚本>；

顺晟科技：

一个简单的方法是使用一个计算属性，当搜索文本发生变化时，它会自动过滤您的产品。

例如：

<template>
  <div>
    <div class="search-wrapper panel-heading col-sm-12">
      <input type="text" v-model="search" placeholder="Search" /> <br />
      <br />
    </div>
    <table class="table" id="myTable">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Category</th>
          <th>Quantity</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in products" :key="product.id">
          <td>{{ product.id }}</td>
          <td>{{ product.name }}</td>
          <td>{{ product.category }}</td>
          <td>{{ product.quantity }}</td>
          <td>{{ product.status }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: []
    };
  }
};
</script>

<代码><；script SRC=“下一个https：//unpkg.com/vue ”>；<；/script>；<；DIV ID=“ app ”>；<；DIV Class=“搜索-包装器面板-标题col-sm-12 ”>；<；input type=“ text ” V-model=“ search ” placeholder=“ search ”/>；<；br>；<；BR>；<；/DIV>；<；表类=“表” ID=“我表”>；<；头（>；）<；TR>；<；th>；ID<；/TH>；<；th>；名称<；/TH>；<；/tr>；<；/thead>；<；正文（>；）<；tr V-for=“ FilteredProducts中的产品”：key=“ product.ID ”>；<；TD>；{{product.ID}}<；/TD>；<；TD>；{{产品名称}}<；/TD>；<；/tr>；<；/t正文>；<；/表格>；<；/DIV>；