Vue指令 --笔记

cn.vuejs.org/v2/guide/in…

v-for & v-if & v-model

<ul>
	<li v-for="item in products">
    	<input type='number' v-model.number='item.quantity'>
        {{ item.quantity }} {{ item.name }}
		<span v-if="products.quantity === 0">
    		- out of stock
        </span>
        <button @click="item.quantity += 1">
            Add
        </button>
    </li>
</ul>
<h2>
	Total Inventory: {{totalProducts}}            
</h2>

<script>
	const app = new Vue({
        el: "#app",
        data: {
            products: [
                'aaa',
                'bbb',
                'ccc'
            ]
        },
        computed: {
            totalProducts () {
                // reduce数组的一个方法，可以用来返回总数
                return this.products.reduce((sum,product) => {
                    return sum + product.quantity
                }, 0)
            }
        }
        created(){
            fetch('url')
            	.then(response => response.json)
            	.then(json => {
                	this.products = json.products
            })
        }
    })        
</script>