實現模糊查詢，查詢出包含輸入內容的元素
兩種監聽方式：
1.實時監聽input輸入框，只要發生改變，就觸發查詢
2.輸入框失去焦點（光標離開輸入框）時觸發
這里采用input事件，實時查詢
為了能實時拿到輸入框的數據，使用v-mdel進行雙向綁定
使用filter篩選數據
由於filter並不會對原數組產生影響，所以需要用新數組替換舊數組
解決方法
1.使用計算屬性（推薦方法）
2.使用兩份原數據，只對一份數據過濾（笨方法）
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<script src='./vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<input type="text" @input="handleInput()" v-model="inputText">
<ul>
<li v-for="data in dataList">
{{ data }}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
inputText: '',
dataList: ['aaa', 'bbb', 'ccc', 'ddd', 'abc', 'bcd', 'acd'],
List: ['aaa', 'bbb', 'ccc', 'ddd', 'abc', 'bcd', 'acd']
},
methods: {
handleInput() {
console.log(this.inputText)
// 使用filter根據inputText篩選數據
var newList = this.List.filter(item => item.indexOf(this.inputText) > -1)
console.log(newList)
this.dataList = newList // 如果這樣直接替換舊數組，會造成每次替換后的數組都是篩選過后的數組
}
}
})
</script>
</body>
</html>