方法1：使用filter与includes配合使用，filter新数组替换旧数组,不影响原始数据，但是这种方法替换数组后就回不到原始数组，所以要将原始数组备份，然后对原始数组在进行过滤才可以
<body>
<div id="box">
<input type="text" @input='handleInput'>
<ul>
<li v-for="(item,index) of list">
{{item}}---{{index}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#box',
data: {
list:['aaa','bbb','ccc','add','eee','fff','ggg'],
oragelist:['aaa','bbb','ccc','add','eee','fff','ggg']
},
methods:{
handleInput(evt){
console.log(evt.target.value)
//过滤数组
// includes 判断是否包含某一字符串，包含返回true，空也是返回true
this.list = this.oragelist.filter(item => item.includes(evt.target.value))
}
}
})
</script>
</body>
方法2：函数表达式的方法,v-model语法糖
<body>
<div id="box">
<input type="text" v-model="mytext">
{{ mymethods() }}
<ul>
<!-- 遍历过滤后的数组 -->
<li v-for="(item,index) of mymethods()">
{{item}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#box',
data: {
list:['aaa','bbb','ccc','add','eee','fff','ggg'],
mytext:''
},
methods:{
mymethods(){
// 依赖此状态的函数也会重新执行
return this.list.filter(item => item.includes(this.mytext))
}
}
})
</script>
</body>
