（1）模板方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!-- 输入框模糊搜索 -->
<div id="box">
<input type="text" v-model="mytext"/>
<ul>
<template v-for="item in dataList" :key="item">
<li v-if="item.includes(mytext)">{{ item }}</li>
</template>
</ul>
</div>
<script>
var obj = {
data(){
return {
mytext:'',
dataList:['aaa','abc','acb','add','abb','acc','bca','cca','bba','ccc','bbb'],
}
}
}
Vue.createApp(obj).mount('#box')
</script>
</body>
</html>（2）复制方案 （浪费内存不优雅）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!-- 输入框模糊搜索 -->
<div id="box">
<input type="text" v-model="mytext" @input="handleInput" />
<ul>
<template v-for="item in dataList" :key="item">
<!-- <li v-if="item.includes(mytext)">{{ item }}</li> -->
<li>{{item}}</li>
</template>
</ul>
</div>
<script>
var obj = {
data(){
return {
mytext:'',
dataList:['aaa','abc','acb','add','abb','acc','bca','cca','bba','ccc','bbb'],
baklist:['aaa','abc','acb','add','abb','acc','bca','cca','bba','ccc','bbb'] // 复制data
}
},
methods:{
handleInput(){
this.dataList = this.baklist.filter(item=>item.includes(this.mytext))
}
}
}
Vue.createApp(obj).mount('#box')
</script>
</body>
</html>（3）函数表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!-- 输入框模糊搜索 -->
<div id="box">
<input type="text" v-model="mytext"/>
<ul>
<template v-for="item in test()" :key="item">
<li>{{ item }}</li>
</template>
</ul>
</div>
<script>
var obj = {
data(){
return {
mytext:'',
dataList:['aaa1','abc','acb','add','abb','acc','bca','cca','bba','ccc','bbb','aac','aab'],
}
},
methods:{
test(){
return this.dataList.filter(item=>item.includes(this.mytext))
}
}
}
Vue.createApp(obj).mount('#box')
</script>
</body>
</html>（4）watch监听 适合异步请求
<body>
<!-- 输入框模糊搜索 watch监听-->
<div id="box">
<input type="text" v-model="mytext"/>
<ul>
<template v-for="item in dataList" :key="item">
<li>{{item}}</li>
</template>
</ul>
</div>
<script>
var obj = {
data(){
return {
mytext:'',
dataList:['aaa','abc','acb','add','abb','acc','bca','cca','bba','ccc','bbb'],
baklist:['aaa','abc','acb','add','abb','acc','bca','cca','bba','ccc','bbb'] // 复制data
}
},
watch:{
mytext(value){
setTimeout(()=>{
this.dataList = this.baklist.filter(item=>item.includes(this.mytext))
},2000)
}
},
}
Vue.createApp(obj).mount('#box')
</script>
</body>（5）计算属性
<body>
<!-- 输入框模糊搜索 计算属性-->
<div id="box">
<input type="text" v-model="mytext"/>
<ul>
<template v-for="item in conputedList" :key="item">
<li>{{item}}</li>
</template>
</ul>
</div>
<script>
var obj = {
data(){
return {
mytext:'',
dataList:['aaa1','abc','acb','add','abb','acc','bca','cca','bba','ccc','bbb'],
}
},
computed:{
conputedList(value){
return this.dataList.filter(item=>item.includes(this.mytext))
}
},
}
Vue.createApp(obj).mount('#box')
</script>
</body>因篇幅问题不能全部显示，请点此查看更多更全内容