我目前正在完成一門在線全堆疊課程，該課程要求我將電子商務商店作為我的最終專案。專案說明的一部分是在我必須使用 Vue.js 的地方添加一個“添加到購物車”功能。
我目前有一個像這樣的物件陣列：
const shop =[
{
id : 1,
name: "Spotify Plaque",
price: 150,
quantity: 0
},
{
id : 2,
name: "Keychain",
price: 35,
quantity: 0
},
{
id : 3,
name: "Cards",
price: 30,
quantity: 0
},
{
id : 4,
name: "Spotify Keychain",
price: 35,
quantity: 0
},
{
id : 5,
name: "Mugs",
price: 70,
quantity: 0
},
{
id : 6,
name: "Glass Cups",
price: 70,
quantity: 0
},
{
id : 7,
name: "Round Christmas Baubles",
price: 45,
quantity: 0
},
{
id : 8,
name: "Flat Christmas Baubles",
price: 30,
quantity: 0
}
]我有這樣的產品展示（使用引導程式）：
<div class="row">
<div class="col-md-6 col-lg-4 d-flex justify-content-center">
<div class="card" style="width: 18rem;">
<img src="./assets/images/spotifykeychain.jpg" class="card-img-top rounded" alt="...">
<div class="card-body">
<h5 class="card-title">Product Name Go Here</h5>
<p class="card-text">Product Price Go Here</p>
<a href="#" class="btn btn-danger"><i class="bi bi-cart-plus"></i> Add to Cart</a>
</div>
</div>
</div>
</div>我的問題是，有什么方法可以顯示陣列中物件中的資訊，但具體選擇要顯示的物件和該物件中的哪些資訊，全部使用 Vue.js？
uj5u.com熱心網友回復：
是的，基本上 Vue.js 做得非常完美。您可以遍歷陣列并選擇顯示的內容，功能強大的是您甚至可以合并if-statement
下面只是一個使用你的陣列和 html 代碼的例子
<div class="row">
<div class="col-md-6 col-lg-4 d-flex justify-content-center" v-for ="prod in shop" :key = "prod.id">
<div class="card" style="width: 18rem;">
<img src="./assets/images/spotifykeychain.jpg" class="card-img-top rounded" alt="...">
<div class="card-body">
<h5 class="card-title">{{prod.name}}</h5>
<p class="card-text">usd {{prod.price}}</p>
<a href="#" class="btn btn-danger"><i class="bi bi-cart-plus"></i> Add to Cart {{prod.quantity}}</a>
</div>
</div>
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/369918.html
標籤：javascript 数组 Vue.js 目的
上一篇：如何捕獲嵌套物件中的元素？