Vue2.0 列表渲染之列表过滤

最新推荐文章于 2023-05-12 08:27:30 发布

结城明日奈是我老婆

最新推荐文章于 2023-05-12 08:27:30 发布

阅读量497

点赞数

分类专栏： # vue2 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/121872121

版权

vue2 专栏收录该内容

80 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>key的作用与原理</title>
    </head>
    <body>
        <div id="root">
            <ul>
                <li v-for="(p,index) of persons" :key="p.id">
                    {{p.name}}-{{p.age}}-{{p.sex}}
                </li>
            </ul>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="indexJS.js"></script>
</html>

Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            persons:[
                {id:001,name:'马冬梅',age:18,sex:'女'},
                {id:002,name:'周冬雨',age:19,sex:'女'},
                {id:003,name:'周杰伦',age:20,sex:'男'},
                {id:004,name:'温兆伦',age:20,sex:'男'}
            ]
        }
    }
})

马冬梅-18-女
周冬雨-19-女
周杰伦-20-男
温兆伦-20-男

<input type="text" placeholder="请输入名字">

使用的是模糊搜索

1.获取用户输入
2.拿到输入，对列表里的数据进行过滤

第一步:收集用户输入的数据

用户的输入能回流到Vue中，可以用v-model

<input type="text" placeholder="请输入名字" v-model="keyWord">

keyWord:'',

收集用户的输入

拿着用户输入的东西进行匹配

数据监视实现

先拿watch写一遍

watch:{
        keyWord(val){
            console.log('keyWord被改了',val)
        }
    }

能拿到，就在数组里面过滤
1.首先要拿到数组this.persons
2.得过滤.filter(过滤)

watch:{
        keyWord(val){
            // console.log('keyWord被改了',val)
            this.persons.filter((p)=>{
                return p.age > 19
            })
        }
    }

return p.age > 19:大于19的过滤出来，而不是过滤掉。
return p.name是否包含val
判断字符串里是否包含指定的字符你得用indexOf

> 'abc'.indexOf('x')
< -1

> 'abc'.indexOf('a')
< 0

> 'abc'.indexOf('b')
< 1

如果包含的话，它就会把这个字符在第几位给你
只要不等于-1就是匹配上了,说明有这词

return p.name.indexOf(val) !== -1

filter过滤完原数组受不受到影响？不受到影响,因为filter它会产生一个全新的数组

this.persons.filter((p)=>{
    return p.name.indexOf(val) !== -1
})

产生了新数组，但是你这个新数组没有用,所以还有一步:

this.persons = this.persons.filter((p)=>{
    return p.name.indexOf(val) !== -1
})

这样有个问题，就是:

输入   冬  有
输入   周  有
输入   马  全没了

你一搜索 冬 把周杰伦和温兆伦的数据搞丢了，而且这俩个数据再也回不来了

这问题怎么处理？

不管你怎么处理，源数据请不要直接修改
persons是源数据(不能改)，创建一个filePersons存放watch过滤出来的东西
watch:{
    keyWord(val){
        // console.log('keyWord被改了',val)
        this.filePersons = this.persons.filter((p)=>{
            return p.name.indexOf(val) !== -1
   })
}
}
上边遍历就不能用persons了
<li v-for="(p,index) of filePersons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
虽然列表里没有东西，但是能不能搜?搜索是可以搜索的就是一上来没有东西
一旦把搜索的值一删除，里面就是空字符串
马冬梅、周冬雨、周杰伦、温兆伦中是包含空字符串的
> 'abcdef'.indexOf('d')
< 3

> 'abcdef'.indexOf('')
< 0

> 'abcdef'.indexOf('a')
< 0
解决办法
watch:{
       keyWord:{
       immediate: true,
       handler(val){
           this.filePersons = this.persons.filter((p)=>{
               return p.name.indexOf(val) != -1
           })
       }
   }
}

用计算属性实现

//#region

代表开始折叠

//#endregion

代表折叠完毕

const vm = new Vue({
    el: '#root',
    data(){
        return{
            keyWord:'',
            persons:[
                {id:001,name:'马冬梅',age:18,sex:'女'},
                {id:002,name:'周冬雨',age:19,sex:'女'},
                {id:003,name:'周杰伦',age:20,sex:'男'},
                {id:004,name:'温兆伦',age:20,sex:'男'}
            ],
        }
    },
    computed:{

    }
})

计算属性是靠返回值返回东西的

computed:{
    filPersons(){
        return this.persons.filter((p)=>{
            return p.name.indexOf(this.keyWord) !== -1
        })
    }
}

这里计算属性依赖了keyWord
计算属性俩个时候调用(1)一上来就给你调一下，第二个时候是计算的时候所依赖的数据发生变化

当computed和watch都能实现的时候我们优先使用computed

结城明日奈是我老婆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue2.0 列表渲染之列表过滤

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫