vue实现实时搜索显示功能

要实现Vue实时搜索显示功能，有以下几个步骤：

创建Vue实例
绑定数据
创建搜索过滤器
创建搜索输入框
显示搜索结果

下面我们来详细讲解这个完整攻略。

创建Vue实例

首先要创建Vue实例，这可通过引入Vue库来实现。需要在HTML文件中引入如下代码：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

然后在JS中创建Vue实例，如下所示：

var app = new Vue({
  el: '#app',
  data: {
    products: [
      { name: 'iPhone X', price: 7999 },
      { name: 'Macbook Pro', price: 12999 },
      { name: 'iPad Pro', price: 6999 },
      { name: 'iMac', price: 10999 }
    ],
    searchKey: ''
  },
});

这里我们通过data选项来定义一个对象products，表示商品列表，和一个字符串searchKey，表示搜索关键字。

绑定数据

接下来，在HTML中创建表格，将products对象绑定到表格中。具体代码如下：

<div id="app">
  <input type="text" v-model="searchKey" placeholder="Type to search...">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="product in filteredProducts">
        <td>{{ product.name }}</td>
        <td>{{ product.price }}</td>
      </tr>
    </tbody>
  </table>
</div>

这里我们通过v-for指令将products对象中的每个元素都渲染到表格中。同时，我们用v-model指令将搜索文本框和searchKey变量绑定起来。

创建搜索过滤器

接下来要创建一个搜索过滤器，在JS中添加如下代码：

Vue.filter('search', function (value, keyword) {
  if (!keyword) return value;
  keyword = keyword.toLowerCase();
  return value.filter(function (product) {
    return product.name.toLowerCase().indexOf(keyword) !== -1;
  });
});

这样我们就创建了一个名为search的全局过滤器，这个过滤器会接收一个数组value和一个字符串keyword。然后我们将keyword转换为小写字母，接着使用filter()方法来过滤value数组。如果product.name中包含了keyword，则将其保留下来。最终返回过滤后的数组。

创建搜索输入框

现在我们需要创建一个搜索输入框，并将之前定义的searchKey绑定到搜索输入框上。具体的代码如下：

<input type="text" v-model="searchKey" placeholder="Type to search...">

显示搜索结果

最终的步骤就是显示搜索结果了。我们需要在HTML中使用v-for指令来循环遍历filteredProducts数组来显示搜索结果。代码如下：

<tbody>
  <tr v-for="product in filteredProducts">
    <td>{{ product.name }}</td>
    <td>{{ product.price }}</td>
  </tr>
</tbody>

同时，在Vue实例的computed选项中定义filteredProducts计算属性，这个计算属性会返回经过search过滤器处理后的products数组。代码如下：

var app = new Vue({
  el: '#app',
  data: {
    products: [
      { name: 'iPhone X', price: 7999 },
      { name: 'Macbook Pro', price: 12999 },
      { name: 'iPad Pro', price: 6999 },
      { name: 'iMac', price: 10999 }
    ],
    searchKey: ''
  },
  computed: {
    filteredProducts: function () {
      return this.products.filter(function (product) {
        return product.name.toLowerCase().indexOf(this.searchKey.toLowerCase()) !== -1;
      }.bind(this));
    }
  }
});

这里我们定义了一个名为filteredProducts的计算属性，这个属性会返回经过search过滤器处理后的products数组。我们使用filter()方法对products数组进行过滤，只留下符合关键字搜索的元素。注意在filter()方法中要使用bind()方法来绑定作用域。

综上所述，这就是Vue实现实时搜索显示功能的完整攻略。下面分别给出两个示例说明。

示例1：搜索学生信息

假设我们有一个存放学生信息的数组，现在需要实现在输入搜索关键字的时候，能够实现实时搜索，并显示搜索结果。代码如下：

HTML

<div id="app">
  <input type="text" v-model="searchKey" placeholder="Type to search...">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="student in filteredStudents">
        <td>{{ student.name }}</td>
        <td>{{ student.age }}</td>
        <td>{{ student.gender }}</td>
      </tr>
    </tbody>
  </table>
</div>

var app = new Vue({
  el: '#app',
  data: {
    students: [
      { name: '张三', age: 18, gender: '男' },
      { name: '李四', age: 20, gender: '女' },
      { name: '王五', age: 19, gender: '男' },
      { name: '赵六', age: 21, gender: '女' }
    ],
    searchKey: ''
  },
  computed: {
    filteredStudents: function () {
      return this.students.filter(function (student) {
        return student.name.toLowerCase().indexOf(this.searchKey.toLowerCase()) !== -1;
      }.bind(this));
    }
  }
});

示例2：搜索商品信息

假设我们有一个存放商品信息的数组，现在需要实现在输入搜索关键字的时候，能够实现实时搜索，并显示搜索结果。代码如下：

HTML

<div id="app">
  <input type="text" v-model="searchKey" placeholder="Type to search...">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Price</th>
        <th>Qty</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="product in filteredProducts">
        <td>{{ product.name }}</td>
        <td>{{ product.price }}</td>
        <td>{{ product.qty }}</td>
      </tr>
    </tbody>
  </table>
</div>

var app = new Vue({
  el: '#app',
  data: {
    products: [
      { name: 'iPhone X', price: 7999, qty: 30 },
      { name: 'Macbook Pro', price: 12999, qty: 20 },
      { name: 'iPad Pro', price: 6999, qty: 50 },
      { name: 'iMac', price: 10999, qty: 10 }
    ],
    searchKey: ''
  },
  computed: {
    filteredProducts: function () {
      return this.products.filter(function (product) {
        return product.name.toLowerCase().indexOf(this.searchKey.toLowerCase()) !== -1;
      }.bind(this));
    }
  }
});

这两个示例都是基于Vue实现实时搜索显示功能的完整攻略，只是在数据方面有所不同。如果需要使用该功能，可根据自己的数据类型来进行相应的更改。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue实现实时搜索显示功能 - Python技术站