Vue输入框模糊搜索的多种写法
（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监听
（5）计算属性