40 lines
900 B
HTML
40 lines
900 B
HTML
<link rel="stylesheet" type="text/css" href="bulma.css">
|
|
|
|
<div id="app">
|
|
<h1>库存信息</h1>
|
|
<hr>
|
|
<ul>
|
|
<li v-for="product in products">
|
|
{{ product.name }} -
|
|
<input type="number" v-model.number="product.quantity" min="0">
|
|
<span v-if="product.quantity === 0">
|
|
已经售罄
|
|
</span>
|
|
<button @click="product.quantity += 1">
|
|
增加库存
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
<h2>库存总量：{{ totalQuantity }}台</h2>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
|
<script>
|
|
const app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
products: [
|
|
{"id": 1, "name": "iPhone X", "quantity": 20},
|
|
{"id": 2, "name": "华为 Mate20", "quantity": 0},
|
|
{"id": 3, "name": "小米 Mix3", "quantity": 50}
|
|
]
|
|
},
|
|
computed: {
|
|
totalQuantity() {
|
|
return this.products.reduce((sum, product) => {
|
|
return sum + product.quantity
|
|
}, 0);
|
|
}
|
|
}
|
|
});
|
|
</script> |