</ul>
</div>
如您所见，我们引用的是handlesearch方法，每次用户在搜索字段中键入内容时都会调用该方法。我们需要创建方法和数据：
new Vue({
el: '#app',
data() {
return {
input: '',
languages: [] }
},
methods: {
handleSearch() {
this.languages = [
'JavaScript',
'Ruby',
'Scala',
'Python',
'Java',
'Kotlin',
'Elixir'
].filter(item => item.toLowerCase().includes(this.input.toLowerCase()))
}
},
created() { this.handleSearch() }
})handlesearch方法使用输入字段的值更新列出的项。需要注意的一点是，在methods对象中，不需要使用this.handlesearch引用该方法（正如在react中必须做的那样）
Computed Properties
虽然上面示例中的搜索可以按预期工作，但更优雅的解决方案是使用计算属性。计算属性对于从现有源组合新数据非常方便，与方法相比，它们的一大优点是缓存了输出。这意味着，如果独立于计算属性的某些内容在页面上发生更改，并且重新呈现UI，则会返回缓存的结果，并且不会重新计算计算计算属性，从而避免了可能代价高昂的操作。
计算属性使我们能够使用我们可用的数据进行即时计算。在本例中，我们有一个需要排序的项目数组。我们希望在用户在输入字段中输入值时进行排序。
我们的模板看起来几乎与前面的迭代相同，除了我们正在传递v-for指令一个计算属性（filteredlist）：
<div id="app">
<h2>Language Search</h2> <div class="form-group">
<input
type="text"
v-model="input"
placeholder="Enter language"
class="form-control"
/>
</div>
<ul v-for="(item, index) in filteredList" class="list-group">
<li class="list-group-item" :key="item">{{ item }}</li>
</ul>
</div>
脚本部分略有不同。我们声明了数据属性中的语言（以前这是一个空数组），而不是方法，我们将逻辑移入了计算属性：
new Vue({
el: "#app",
data() {
return {
input: '',
languages: [
"JavaScript",
"Ruby",
"Scala",
"Python",
"Java",
"Kotlin",
"Elixir"
] }
},
computed: {
filteredList() {
return this.languages.filter((item) => {
return item.toLowerCase().includes(this.input.toLowerCase())
})
}
}
})filteredList计算属性将包含包含输入字段值的项数组。在第一次渲染时（当输入字段为空时），将渲染整个数组。当用户在字段中输入值时，filteredList将返回一个数组，其中包含输入到字段中的值。
