在現(xiàn)代的Web應用程序上，搜索用戶是極其常見的需求之一。在Vue中，也可以很容易地實現(xiàn)搜索用戶的功能。

首先，我們需要有一個用戶數(shù)據(jù)數(shù)組。假設我們有一個JSON文件，里面包含一些用戶信息：

[
{
"id": 1,
"name": "Alice",
"email": "alice@gmail.com"
},
{
"id": 2,
"name": "Bob",
"email": "bob@gmail.com"
},
{
"id": 3,
"name": "Charlie",
"email": "charlie@gmail.com"
}
]

我們需要在Vue中定義一個模型來存儲這些用戶數(shù)據(jù)：

var app = new Vue({
el: '#app',
data: {
users: []
},
mounted: function() {
var self = this;
axios.get('/api/users')
.then(function(response) {
self.users = response.data;
});
}
});

這里使用了Axios來獲取JSON數(shù)據(jù)。

接下來，我們需要一個搜索輸入框。在Vue中，可以很容易地創(chuàng)建一個綁定到模型的輸入框：

這里我們使用了v-model來實現(xiàn)數(shù)據(jù)綁定。每當輸入框中的內(nèi)容發(fā)生變化時，searchQuery也會跟著變化。現(xiàn)在我們需要一個過濾器來過濾用戶：

computed: {
filteredUsers: function() {
var self = this;
return this.users.filter(function(user) {
return user.name.indexOf(self.searchQuery) !== -1;
});
}
}

我們使用computed屬性來定義一個計算屬性。該函數(shù)返回一個已過濾用戶列表，其中只包含與搜索查詢匹配的用戶。在過濾函數(shù)中，我們使用indexOf來查找用戶姓名中是否包含搜索查詢（無論大小寫）。如果是，則返回true，該用戶將被包含在過濾器結果中。

經(jīng)過上述步驟后，我們已經(jīng)擁有了一個可以搜索用戶的Vue應用程序。但這只是開始。你可能想添加更多的功能，比如可以按名字排序、添加用戶等等。Vue讓這些功能的實現(xiàn)變得非常簡單。