标签:span add 页面 rod bin uri script || --
IDE:VSCode(推荐)或者Sublime Text
前导技术:JavaScript中级
页面代码:
<div id="app">
<ul>
<li v-for="product in products">
<input type="number" v-model.number="product.quantity">
{{ product.name }} <!--using double { to define an expression-->
<span v-if="product.quantity === 0">
- OUT OF STOCK
</span>
<span v-if="product.quantity < 0 || product.quantity % 1 != 0">
- INVALID NUMBER
</span>
<button @click="product.quantity += 1">
Add
</button>
<button @click="product.quantity -= 1">
Minus
</button>
</li>
</ul>
<h2>Total Inventory: {{ totalProducts }}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
const app = new Vue({
el: '#app',
data: {
products: []
},
computed: {
totalProducts () { // Here totalProducts() is a property of computed
return this.products.reduce((sum, product) => {
return sum + product.quantity
}, 0)
}
},
created () {
fetch('https://api.myjson.com/bins/clqnb')
.then(response => response.json())
.then(json => {
this.products = json.products
})
}
})
</script>
json测试数据:
{
"products":[
{"id":1,"quantity":1,"name":"Compass"},
{"id":0,"quantity":2,"name":"Jacket"},
{"id":3,"quantity":5,"name":"Hiking Socks"},
{"id":4,"quantity":2,"name":"Suntan Lotion"}
]
}
json托管(提供API):http://myjson.com/
注意:此处需能够访问的代理服务器!
标签:span add 页面 rod bin uri script || --
原文地址:https://www.cnblogs.com/xsjzhao/p/11006917.html