Método 1 (copiar una copia de los datos):
<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))
}
}
}Método 2 (usando expresiones de funciones):
<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>