方法一(复制一份数据):
<template>
<div id="app">
<input type="text" @input="changeText" v-model="mytext">
<div v-for="(item,index) in dataList" :key="index">
<ul>
<li>{
{ item }}</li>
</ul>
</div>
<!-- <router-view></router-view> -->
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
mytext:"",
dataList:["aaa","bca","cda","eee","ddd","bbc","bca"],
// 复制一份旧数据,耗内存
olddataList:["aaa","bca","cda","eee","ddd","bbc","bca"],
}
},
methods:{
changeText(){
this.dataList=this.olddataList.filter(item=>item.includes(this.mytext))
}
}
}
方法二(利用函数表达式的方式):
<template>
<div id="app">
<input type="text" v-model="mytext">
<!-- 此处的test()是函数表达式,同样在{
{ }}内也能被渲出数据,前提是加上return -->
<div v-for="(item,index) in test()" :key="index">
<ul>
<li>{
{ item }}</li>
</ul>
</div>
<!-- <router-view></router-view> -->
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
mytext:"",
dataList:["aaa","bca","cda","eee","ddd","bbc","bca"],
}
},
methods:{
test(){
return this.dataList.filter(item=>item.includes(this.mytext))
}
}
}
</script>