方法一：函数表达式
<script src="/lib/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" @input="jianting" v-model="mytext">
<button >搜索</button>
<ul>
<li v-for="item in test()" :key="item">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#box",
data:{
mytext:"",
datalist:['aaa','abb','bbc','cca','ddd','dac','abc','cbd' ]
},
methods:{
test(){
return this.datalist.filter(item=> item.includes(this.mytext))
}
}
})
</script>
</body>方法二：覆盖
<title>Document</title>
<script src="/lib/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" @input="jianting" v-model="mytext">
<button >搜索</button>
<ul>
<li v-for="item in datalist" :key="item">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#box",
data:{
mytext:"",
datalist:['aaa','abb','bbc','cca','ddd','dac','abc','cbd' ],
// 原数组
originList:['aaa','abb','bbc','cca','ddd','dac','abc','cbd' ]
},
methods:{
jianting(){
console.log("input",this.mytext);
// filter 过滤
// 老数组不改变，新数组覆盖
this.datalist = this.originList.filter(item=> item.includes(this.mytext))
}
}
})
</script>
</body>
