目录
需求
给定一个列表(模拟数据)，根据用户输入，自动筛选输入的内容并输出到屏幕
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/jQuery.js"></script>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" @input="inputFunc" v-model="myText">
<ul>
<li v-for="i in newItemList">{{i}}</li>
</ul>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
myText: '',
itemList: ['a', 'ab', 'abc', 'b', 'bc', 'bdc', 'dbd'],
newItemList: ['a', 'ab', 'abc', 'b', 'bc', 'bdc', 'dbd']
},
methods: {
inputFunc() {
// 当接收到true，则会将输入的内容返回，并写入到newItemList中，最终输出到屏幕
this.newItemList = this.itemList.filter(
// 当输入的内容存在，则返回true
item => item.indexOf(this.myText) >= 0
)
}
}
})
</script>
</html>