vue案例---数据筛选

本次案例是要完成在输入框输入字符，下面显示相关内容，相当于搜索历史的功能

本次案例我们用到indexOf用法

在vue中，indexof()可用来返回某个指定的字符串值在字符串中首次出现的位置，也可利用返回值判断指定字符串是否存在，语法“stringObject.indexOf(searchvalue,fromindex)”。

indexOf方法说明：

该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头(没有指定 fromindex 时)。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。

注意：1.indexOf() 方法对大小写敏感！

           2.如果要检索的字符串值没有出现，则该方法返回 -1。

接下来我们来开始编写代码

首先我们需要绑定输入框里的内容，并且遍历数据代码如下：

<!-- 视图层 -->
<template>
  <div id="app">
    <h2>数据筛选</h2>
    <input type="text" v-model="personName" />
    <ul>
      <li v-for="item in personArr">{{item}}</li>
    </ul>
  </div>
</template>

<!-- 逻辑层 -->
<script>
export default {
  name: "",
  data() {
    return {
      personName: "",
      personArr: [
        "喜羊羊",
        "美羊羊",
        "懒羊羊",
        "沸羊羊",
        "暖羊羊",
        "熊大",
        "熊二",
        "光头强",
        "猪猪侠",
        "小猪佩奇",
        "小猪乔治",
      ],
    };
  },
  components: {},
};
</script>

<!-- 样式层 -->
<style lang="" scoped>
</style>

 然后应该怎么做呢？

这里用到computed方法

computed：是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有
它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed
的值；

computed运用场景：当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；

主要步骤：在computed中定义一个list方法，在list方法中定义一个空数组，定义一个变量拿到输入框中的值，并且用到forEach遍历我们在data中的定义的数组的值，然后用到indexOf方法去筛选里的值，如果返回值是-1，就代表没有这个值，然后返回遍历后的数组，最后遍历数组的值

完整代码如下：

<!-- 视图层 -->
<template>
  <div id="app">
    <h2>数据筛选</h2>
    <input type="text" v-model="personName" />
    <ul>
      <li v-for="item in list">{{ item }}</li>
    </ul>
  </div>
</template>

<!-- 逻辑层 -->
<script>
export default {
  name: "",
  data() {
    return {
      personName: "",
      personArr: [
        "喜羊羊",
        "美羊羊",
        "懒羊羊",
        "沸羊羊",
        "暖羊羊",
        "熊大",
        "熊二",
        "光头强",
        "猪猪侠",
        "小猪佩奇",
        "小猪乔治",
      ],
    };
  },
  components: {},
  // computed方法
  computed: {
    // 定义一个方法
    list() {
      // 定义一个空数组
      let res = [];
      // 定义newname拿到输入框里的变量值
      let newname = this.personName;
      this.personArr.forEach(function (item) {
        if (item.indexOf(newname) != -1) {
          res.push(item);
        }
      });
      return res;
    },
  },
};
</script>

<!-- 样式层 -->
<style lang="" scoped>
</style>

效果如下：

 这样的效果就完成了