<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="product in products">
<!--{{product}}-->
<!--{{product.quantity}}{{product.name}}-->
<!--直接写入商品的数量--创建一个文本框，通过V-MODEL指令绑定商品数量字段，指定这一定是一个数字-->
<input type="number" v-model.number="product.quantity">{{product.name}}
<span v-if="product.quantity===0">
<!--在项目数量为0的时候出现-->
OUT OF STOCK
</span>
<!--添加交互行为--点击add，商品数量加1-->
<button @click="product.quantity+=1">
add
</button>
</li>
</ul>
<!--打印列表中商品的总数-->
<h2>Total Inventory:{{totalProducts}}</h2>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = new Vue({
el:'#app',
data: {
products:[]
}, //从空列表开始
computed:{ //创建一个名为totalProducts的计算属性
totalProducts(){
return this.products.reduce((sum,product)=>{
return sum + product.quantity
},0)
}
},
created() { //从一个实际的API获取我们的商品信息
fetch("https://api.myjson.com/bins/74l63")
.then(response => response.json()) //当应用创建时，我们会从此API获取最新的商品消息
//这就是要从这里获取的全部
.then(json => {
this.products=json.products
})
}
})
</script>
</body>
</html>
