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">
<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