方法1
<div id="app">
<input type="text" @input="handleInput()" v-model="mytext" />
<ul>
<div v-if="isInput">
<li v-for="data in newarr">
{{ data }}
</li>
</div>
<div v-else>
<li v-for="data in arr">
{{ data }}
</li>
</div>
</ul>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
mytext: [],
newarr: [],
isInput: false,
arr:["aaa","bbb","ccc","abb","aab"]
},
methods:{
handleInput(){
this.newarr=this.arr.filter(item=>{ return item.indexOf(this.mytext)>-1 })
if(this.mytext.length==0)
this.isInput=false
else
this.isInput=true
}
}
})
</script>
方法2
<hr>
<div id="app5">
<input type="text" v-model="mytext">
<div v-for="data in getProvince">
<li>{{ data }}</li>
</div>
</div>
<script>
var app5 = new Vue({
el:'#app5',
data:{
provinces: ["北京","上海","广东","山东","广西","湖南","湖北","安徽","江苏"],
mytext: []
},
computed: {
getProvince(){
newarr=this.provinces.filter(item=>{ return item.indexOf(this.mytext)>-1 })
return newarr
}
}
})
</script>