Vue是一個流行的JavaScript框架，因其易用性和可擴展性而備受青睞。今天，我們將會介紹如何使用Vue來構建一個花瓶應用程序。

在這個應用程序中，我們將使用Vue來創建一個動態列表，其中包含花瓶的名稱、圖片和描述信息。我們還將向列表中添加一個搜索框，使用戶可以更輕松地查找他們感興趣的花瓶。

<template>
<div>
<h1>Vue Flower Vases</h1>
<input type="text" v-model="search" placeholder="Search">
<ul>
<li v-for="vase in vasesFiltered" :key="vase.id">
<h2>{{ vase.name }}</h2>
<p>{{ vase.description }}</p>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
search: "",
vases: [
{
id: 1,
name: "Blue and Gold Vase",
image: "https://via.placeholder.com/150",
description: "This beautiful vase features an intricate design and is perfect for showcasing your favorite flowers."
},
{
id: 2,
name: "Green Ceramic Vase",
image: "https://via.placeholder.com/150",
description: "This sturdy vase is perfect for displaying larger flowers, such as sunflowers or daisies."
},
{
id: 3,
name: "Crystal Vase",
image: "https://via.placeholder.com/150",
description: "This elegant vase is perfect for formal occasions and is sure to impress your guests."
}
]
};
},
computed: {
vasesFiltered() {
return this.vases.filter(vase =>
vase.name.toLowerCase().includes(this.search.toLowerCase())
);
}
}
};
</script>

在上面的代碼中，我們創建了一個Vue組件，其中定義了一個名為vases的數據數組。該數組包含了所有花瓶的信息，包括名稱、圖像和描述。我們還定義了一個名為search的data屬性，它將存儲用戶輸入的搜索詞。

我們使用v-for指令來遍歷vases數組，并使用v-bind指令將每個花瓶的ID綁定到li元素的key屬性上。我們還使用v-model指令將用戶搜索框中的值綁定到search屬性上，以便在用戶輸入時更新列表。

最后，我們定義了一個名為vasesFiltered的計算屬性，它使用JavaScript的filter()方法來過濾包含搜索詞的花瓶。通過這種方式，我們可以輕松地動態更新列表，使用戶更愉悅地使用我們的應用程序。