欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

列表过滤案例-输入框输入内容 过滤出符合条件的

程序员文章站 2022-04-12 16:14:33
...
<body>
    <!-- 
      想要对数据加工后再展示,且不想破坏原数据,最好用计算属性。
    -->
    <!-- 准备好一个容器-->
    <div id="root">
      <h2>人员列表</h2>
      <input v-model="keyWord" type="text" placeholder="请输入姓名">
      <ul>
        <li v-for="(p,index) in fmtPersons" :key="p.id">
          {{p.name}}--{{p.sex}}--{{p.age}}岁
        </li>
      </ul>
    </div>

    <script type="text/javascript" >
      new Vue({
        el:'#root',
        data:{
          keyWord:'',
          persons:[
            {id:'001',name:'马冬梅',age:35,sex:'女'},
            {id:'002',name:'周冬雨',age:20,sex:'女'},
            {id:'003',name:'周杰伦',age:41,sex:'男'},
            {id:'004',name:'温兆伦',age:25,sex:'男'},
          ]
        },

        //使用computed过滤,优势:不影响原数据
        computed:{
          fmtPersons(){
            const {persons,keyWord} = this
            return persons.filter( p => p.name.indexOf(keyWord) !== -1)
          }
        }

        //在watch修改原数据,会导致原数据的丢失
        /* watch:{
          keyWord(value){
            const arr = this.persons.filter( p => p.name.indexOf(value) !== -1)
            this.persons = arr//这里修改了原数组
          }
        } */
      })
    </script>
  </body>

原生js中的filter(过滤)方法

filter 方法返回一个新数组, 包含通过所提供函数实现的测试的所有元素。

var newArray = arr.filter(callback(item,index,thisArr))

说明:

callback:测试函数

item:当前元素

index:当前索引

thisArr:调用了 filter 的数组本身

newArray:返回的新数组,包含所有通过测试的元素。

indexOf()

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

stringObject.indexOf(searchvalue,fromindex)

参数 描述
searchvalue 必需。规定需检索的字符串值。
fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。

**注释:**indexOf() 方法对大小写敏感!

**注释:**如果要检索的字符串值没有出现,则该方法返回 -1。