12vue学习——实现搜索框功能

最新推荐文章于 2024-05-07 23:37:14 发布

0563xixi

最新推荐文章于 2024-05-07 23:37:14 发布

阅读量1.2k

点赞数 4

本文链接：https://blog.csdn.net/weixin_42530160/article/details/97235253

版权

12vue学习——实现搜索框功能

前言

经过前面对vue的一些基础的知识点的学习，我们知道了利用 v-for 指令将 data 中的数组的数据全部渲染到页面上是如何实现的了，但是如此不加以选择的全部将数据加载到页面有时候不符合我们功能的需求，像搜索功能这样的就需要我们对数据加以选择过滤再渲染出来，接下来让我们来学习怎么做吧。

全部代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>实现搜索功能</title>
  <link rel="stylesheet" href="../lib/bootstrap.css">
</head>
<body>
  <div class="body">
      <input type="text" class=" form-control" v-model="keywords" style="width: 200px">
      <table class="table table-bordered table-hover table-striped">
          <thead>
              <tr>
                  <th>id</th>
                  <th>name</th>
              </tr>
          </thead>
          <tbody>
              <tr v-for="item in search(keywords)">
                  <td>{{item.id}}</td>
                  <td>{{item.name}}</td>
              </tr>
          </tbody>
      </table>
  </div>
  <script src="../lib/vue-2.4.0.js"></script>
  <script>
      let vm = new Vue({
          el: ".body",
          data: {
              keywords:"",
              list: [
                  { id: 1, name: "我是1" },
                  { id: 2, name: "我是2" }
              ]
          },
          methods: {
              search(keywords){
              	/* 
                  使用foreach方法
                  let newList = [];
                  this.list.forEach(item => {
                      if(item.name.indexOf(keywords) != -1){
                          newList.push(item);
                      }
                  });
                  return newList; 
             		*/
             		/* 使用filters方法 */
                 return this.list.filter(item => {
                 if(item.name.includes(keywords)){
                      return item;
                 }
              })
           }
        },
     })
 </script>
</body>
</html>

步骤:

1.给页面一个搜索的文本框以及一个存放数组的表格，界面如图：

2.将 v-for=“item in list” 中的 list 修改为一个选择的方法

（1）如果直接使用 list 变量名则是将所有对象都显示到页面上去，所以我们需要的是一个返回选择之后的数组来替换 list 。
（2）将搜索框中的输入的值使用 v-model 和 data 中的数据实现双向数据绑定，然后将该值作为参数传给该选择的方法

3. 实现search 方法

分析：
（1）遍历 data 中的 list 对象—— forEach 方法和 filter 方法
（2）看遍历得到的 item.name 是否包含 keywords —— 是否包含的方法有 indexOf 和 includes
（3）代码：

0563xixi

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
12vue学习——实现搜索框功能

经过前面对vue的一些基础的知识点的学习，我们知道了利用 v-for 指令将 data 中的数组的数据全部渲染到页面上是如何实现的了，但是如此不加以选择的全部将数据加载到页面有时候不符合我们功能的需求，像搜索功能这样的就需要我们对数据加以选择过滤再渲染出来，接下来让我们来学习怎么做吧。
复制链接

扫一扫